1
00:00:00,980 --> 00:00:07,450
Just as we added in the images for our slider, we can also add in the dots for our indicators.

2
00:00:07,820 --> 00:00:13,700
So going into our builder function, let's create some Spens and you don't have to call it spane.

3
00:00:13,700 --> 00:00:14,900
I'm just calling it spane.

4
00:00:14,900 --> 00:00:21,590
It's let's say it's temporary within this block of code, using the same method as earlier where we

5
00:00:21,590 --> 00:00:25,340
create an element and this time we're going to create a spec.

6
00:00:25,340 --> 00:00:28,570
And taking that span, we're going to add a class.

7
00:00:28,760 --> 00:00:32,810
So notice before when we added classes, we did set attribute class.

8
00:00:33,090 --> 00:00:34,760
So that's one way to add classes.

9
00:00:34,940 --> 00:00:39,440
And because we only have the one class that we're adding in, we can use class list.

10
00:00:39,620 --> 00:00:44,610
And the same way that if we've selected the object, we can add and remove classes.

11
00:00:44,750 --> 00:00:48,170
So in this case, we're adding in a class and the class name is Daudt.

12
00:00:48,650 --> 00:00:51,380
We also want to make these elements interactive.

13
00:00:51,770 --> 00:00:56,680
So let's sort of take that same object that we just created and we can add an event listener.

14
00:00:56,900 --> 00:01:03,200
So, again, as if we selected that element that was already existing, we can add in this functionality

15
00:01:03,200 --> 00:01:04,040
the same way.

16
00:01:04,910 --> 00:01:10,760
So adding in the event listener and in this case, we're just going to invoke a function called Move

17
00:01:10,760 --> 00:01:16,600
Slide and we're going to pass over the value of X because it's still within this block of code.

18
00:01:16,730 --> 00:01:24,560
So X still has a value because with JavaScript you can move out and you can take the value of the variables

19
00:01:24,560 --> 00:01:25,220
of the parent.

20
00:01:25,460 --> 00:01:26,710
So X has a value.

21
00:01:26,720 --> 00:01:31,930
So we're passing in that value of X, which whatever the case may be, it gets past them.

22
00:01:31,950 --> 00:01:34,030
And then lastly, we need to add it in.

23
00:01:34,220 --> 00:01:42,680
So just as we selected the element slide container, we can select the indicator at in spane into there

24
00:01:42,770 --> 00:01:45,010
and these ones we should be able to see.

25
00:01:45,050 --> 00:01:53,120
So let's open up our browser and we do a quick refresh and there is our indicators and we also maybe

26
00:01:53,120 --> 00:01:55,860
want to apply a little bit more spacing between them.

27
00:01:56,150 --> 00:02:01,670
So this is one of those things that once you actually see it, then you can get a better grasp for how

28
00:02:01,670 --> 00:02:02,870
much spacing you need.

29
00:02:03,140 --> 00:02:06,500
So I see that maybe a little bit more spacing between them is better.

30
00:02:06,650 --> 00:02:09,350
And these are all fully dynamic, just as the images.

31
00:02:09,590 --> 00:02:13,880
So all dependent on how many images you have within your array.

32
00:02:14,090 --> 00:02:19,460
So if you were to by chance, add in more images and I'm going to add those, but I can also remove

33
00:02:19,460 --> 00:02:19,760
those.

34
00:02:19,910 --> 00:02:22,480
You see that we dynamically adjust as well.

35
00:02:22,850 --> 00:02:24,200
And that's exactly what we want.

36
00:02:24,200 --> 00:02:30,560
We want as much flexibility with our application as possible so that if we do need to update, we don't

37
00:02:30,560 --> 00:02:35,270
have to worry as much about the code and we can focus on updating the content instead.

38
00:02:35,750 --> 00:02:42,290
So now that we've concluded this lesson, this is where we conclude with the developing of what the

39
00:02:42,290 --> 00:02:44,630
visuals are, creating all of the elements.

40
00:02:44,870 --> 00:02:46,180
So get familiar with that.

41
00:02:46,190 --> 00:02:47,090
Try that out.

42
00:02:47,330 --> 00:02:52,220
Adding an event listener is another cool option that you can do to the elements that you're creating

43
00:02:52,220 --> 00:02:52,860
on the fly.

44
00:02:53,210 --> 00:02:58,250
And then lastly, we need to wait to play the slides so we don't have anything happening quite yet.

45
00:02:58,370 --> 00:03:01,420
And we also need to add in the ability to move a slide.

46
00:03:01,580 --> 00:03:03,470
So take care of that in the next lesson.

47
00:03:03,470 --> 00:03:06,560
And the upcoming lessons will move the slides animating the.