1
00:00:00,270 --> 00:00:05,340
The previous lesson, we added, the ability to click the dots, and we also need to add in a function

2
00:00:05,340 --> 00:00:08,670
to handle those clicks, we already created a name for the function.

3
00:00:08,700 --> 00:00:10,250
So let's move slide.

4
00:00:10,530 --> 00:00:15,340
And what this is going to do is right now, all we're doing is passing in a value.

5
00:00:15,360 --> 00:00:17,280
So this is just a no value.

6
00:00:17,580 --> 00:00:21,270
And we can console log that out just to test that it is working.

7
00:00:21,510 --> 00:00:26,550
And usually as we're building these out, it's always a good idea to test and make sure things are working

8
00:00:26,550 --> 00:00:27,150
as needed.

9
00:00:27,420 --> 00:00:32,520
So now when I click these indicators, I get the value of the image that needs to be shown.

10
00:00:32,610 --> 00:00:39,490
And this is coincides with the values of their index values within the my images array object.

11
00:00:40,080 --> 00:00:45,230
So now we can create one more function and this is the one where we're going to play the slides.

12
00:00:45,570 --> 00:00:53,220
So opening up our editor and after we've built our visual area, we can invoke a function where we can

13
00:00:53,220 --> 00:00:56,180
call it play slide or play slides.

14
00:00:57,060 --> 00:00:58,260
Let's create that one.

15
00:00:58,500 --> 00:01:03,680
And we don't need to pass any arguments into it, but we do need to make some selections.

16
00:01:03,690 --> 00:01:11,760
So let's select our slides using documents, query selector and this is query selector all so that we

17
00:01:11,760 --> 00:01:16,370
select all of the available slides because of course we could have more than one.

18
00:01:16,380 --> 00:01:19,020
So we want it to make it as dynamic as possible.

19
00:01:19,350 --> 00:01:23,880
So selecting all of the slides, we need to also select all of the dots.

20
00:01:24,060 --> 00:01:29,160
And this actually can be const because we're not changing the object and we can just use const.

21
00:01:29,610 --> 00:01:31,830
So these are within this block of code.

22
00:01:32,970 --> 00:01:34,340
So we've got our dots.

23
00:01:34,350 --> 00:01:40,020
So using the same format and this time it's query selector and as well query selector all.

24
00:01:40,230 --> 00:01:47,850
But we're selecting the element with the class of DOT and these are corresponding with the classes that

25
00:01:47,850 --> 00:01:48,590
we've added in.

26
00:01:48,600 --> 00:01:57,390
So we've got my slide class, the dot that we're adding, and we also want to set one of those to active.

27
00:01:58,350 --> 00:02:06,230
So selecting our active element and I'll show you how we're going to add that in so using query selector

28
00:02:07,050 --> 00:02:13,470
and we should only have one element with the active class, let's put them in the console just to make

29
00:02:13,470 --> 00:02:17,610
sure that everything is good before we try to do some type of action with them.

30
00:02:18,210 --> 00:02:22,530
And active right now should be null because we don't have any elements with it and this should actually

31
00:02:22,530 --> 00:02:23,430
be placed slides.

32
00:02:23,670 --> 00:02:30,120
So make sure that it's placed like try that out and you can see that now we have the place slides,

33
00:02:30,150 --> 00:02:33,290
so we list out all of those values that are contained in there.

34
00:02:33,540 --> 00:02:35,850
So starting at line list number 99.

35
00:02:36,000 --> 00:02:38,880
So we don't have anything for the slides.

36
00:02:39,030 --> 00:02:42,420
And that is also because I had set it as my slide.

37
00:02:42,750 --> 00:02:45,160
And so always a good thing that we do check.

38
00:02:45,510 --> 00:02:47,410
So now we've got our 100.

39
00:02:47,430 --> 00:02:48,540
So it has a node list.

40
00:02:48,720 --> 00:02:53,990
So it's selected all of the slides span dot and that's the list over here.

41
00:02:54,120 --> 00:02:56,730
So we've got the divs with the my slide.

42
00:02:56,940 --> 00:02:59,880
So these represent all of the images that we have.

43
00:03:00,270 --> 00:03:02,010
These represent all of the dots.

44
00:03:02,010 --> 00:03:08,280
And as you can see, when I hover over them in the visible area of our browser, you can see that that

45
00:03:08,280 --> 00:03:09,840
also highlights as well.

46
00:03:10,470 --> 00:03:15,200
And then we've got NUL for octave, so everything looks ready to move on.

47
00:03:15,930 --> 00:03:18,130
So opening up our Aitor will make it big again.

48
00:03:18,570 --> 00:03:22,470
So we've got a connection to all of the elements and that we need to utilize.

49
00:03:22,830 --> 00:03:24,990
And there's one thing that we do need to do now.

50
00:03:24,990 --> 00:03:28,460
We need to make use of our slide index value.

51
00:03:28,680 --> 00:03:34,290
So this is a value that's going to increment and we're going to increment it every time we play slides.

52
00:03:34,680 --> 00:03:36,330
And this is going to be right at the end.

53
00:03:36,340 --> 00:03:39,390
So slide index is going to increment by one.

54
00:03:39,540 --> 00:03:48,330
And that also means that we need to check to make sure that our slide index so our slide index plus

55
00:03:48,330 --> 00:03:53,790
one, because we know we're adding one to it is greater than slide's length.

56
00:03:54,090 --> 00:04:00,780
And the reason that we do slides length, we know that within our array are a node list.

57
00:04:01,050 --> 00:04:02,820
We've got a length of three.

58
00:04:03,090 --> 00:04:09,300
But if we're using an array, a zero based index value, we're starting at zero.

59
00:04:09,300 --> 00:04:14,130
So that's where we need to add in that plus one so that both of these matches, so they're both starting

60
00:04:14,130 --> 00:04:19,400
at either one or you can subtract one from sleights length so that they'd both be starting at zero.

61
00:04:19,410 --> 00:04:21,440
So they both need to have the same starting point.

62
00:04:22,410 --> 00:04:29,340
So if it is larger than we can take slight index and we'll equal that to zero, so we need to start

63
00:04:29,340 --> 00:04:31,440
again back at the original slide.

64
00:04:31,780 --> 00:04:38,850
So now that we also got that, we need to go through the slides and for each and selecting each one

65
00:04:38,850 --> 00:04:42,720
of the elements that has a class of my slide.

66
00:04:43,200 --> 00:04:48,690
We're looping through there and we're going to take that element, apply a style and we're going to

67
00:04:48,690 --> 00:04:50,310
display none on those.

68
00:04:51,310 --> 00:04:56,460
So that even though they are hidden in the overlay, it's always a good idea to do the display down

69
00:04:56,470 --> 00:04:58,960
and then we could actually remove the overlay if we wanted to.

70
00:04:59,290 --> 00:05:07,150
So the next thing that we want to do is take slides and using that global slide index of value because

71
00:05:07,150 --> 00:05:10,620
slides is a node list or it operates as an array.

72
00:05:10,930 --> 00:05:18,790
So taking that slide index value as our index value for the slide that we want to look at, we take

73
00:05:18,790 --> 00:05:23,320
style and display instead of display none.

74
00:05:23,320 --> 00:05:25,440
We set a display block so it is visible.

75
00:05:26,110 --> 00:05:28,570
So that's going to actually show up our slide.

76
00:05:29,530 --> 00:05:35,680
And in order to move it along, let's take our global object of Taimur, use the set time out method

77
00:05:35,680 --> 00:05:43,360
and JavaScript and we're going to call back to the plate slides function and we can change the slide

78
00:05:43,360 --> 00:05:48,190
every three, three seconds or three thousand milliseconds before we try it.

79
00:05:48,250 --> 00:05:55,620
There's actually one error because there's a bracket here that should be closing off this builder function.

80
00:05:56,110 --> 00:06:00,730
So instead of having it down there, I'm going to add it here within the console of my images.

81
00:06:00,940 --> 00:06:04,140
And this is also where we need to invoke the place slides.

82
00:06:04,480 --> 00:06:08,380
Otherwise we've got it within our loop and we're going to run it multiple times.

83
00:06:08,680 --> 00:06:10,070
So I think we're ready to try this out.

84
00:06:10,090 --> 00:06:11,830
So open up and refresh.

85
00:06:12,340 --> 00:06:14,110
So we've got our first image.

86
00:06:14,110 --> 00:06:19,120
We wait three seconds, we get our next image, wait three seconds again, get our next image.

87
00:06:19,120 --> 00:06:21,420
And now we should revert back to the first image.

88
00:06:21,760 --> 00:06:27,550
So everything seems to be working properly and we're ready to move on to the next part of this where

89
00:06:27,580 --> 00:06:33,730
we're going to be outputting, where we can add the ability for the buttons, the dots indicators to

90
00:06:33,730 --> 00:06:34,240
be clicked.

91
00:06:34,250 --> 00:06:35,290
So that's coming up next.