Just as we added in the images for our slider, we can also add in the dots for our indicators.
So going into our builder function, let's create some Spens and you don't have to call it spane.
I'm just calling it spane.
It's let's say it's temporary within this block of code, using the same method as earlier where we
create an element and this time we're going to create a spec.
And taking that span, we're going to add a class.
So notice before when we added classes, we did set attribute class.
So that's one way to add classes.
And because we only have the one class that we're adding in, we can use class list.
And the same way that if we've selected the object, we can add and remove classes.
So in this case, we're adding in a class and the class name is Daudt.
We also want to make these elements interactive.
So let's sort of take that same object that we just created and we can add an event listener.
So, again, as if we selected that element that was already existing, we can add in this functionality
the same way.
So adding in the event listener and in this case, we're just going to invoke a function called Move
Slide and we're going to pass over the value of X because it's still within this block of code.
So X still has a value because with JavaScript you can move out and you can take the value of the variables
of the parent.
So X has a value.
So we're passing in that value of X, which whatever the case may be, it gets past them.
And then lastly, we need to add it in.
So just as we selected the element slide container, we can select the indicator at in spane into there
and these ones we should be able to see.
So let's open up our browser and we do a quick refresh and there is our indicators and we also maybe
want to apply a little bit more spacing between them.
So this is one of those things that once you actually see it, then you can get a better grasp for how
much spacing you need.
So I see that maybe a little bit more spacing between them is better.
And these are all fully dynamic, just as the images.
So all dependent on how many images you have within your array.
So if you were to by chance, add in more images and I'm going to add those, but I can also remove
those.
You see that we dynamically adjust as well.
And that's exactly what we want.
We want as much flexibility with our application as possible so that if we do need to update, we don't
have to worry as much about the code and we can focus on updating the content instead.
So now that we've concluded this lesson, this is where we conclude with the developing of what the
visuals are, creating all of the elements.
So get familiar with that.
Try that out.
Adding an event listener is another cool option that you can do to the elements that you're creating
on the fly.
And then lastly, we need to wait to play the slides so we don't have anything happening quite yet.
And we also need to add in the ability to move a slide.
So take care of that in the next lesson.
And the upcoming lessons will move the slides animating the.