The previous lesson, we added, the ability to click the dots, and we also need to add in a function
to handle those clicks, we already created a name for the function.
So let's move slide.
And what this is going to do is right now, all we're doing is passing in a value.
So this is just a no value.
And we can console log that out just to test that it is working.
And usually as we're building these out, it's always a good idea to test and make sure things are working
as needed.
So now when I click these indicators, I get the value of the image that needs to be shown.
And this is coincides with the values of their index values within the my images array object.
So now we can create one more function and this is the one where we're going to play the slides.
So opening up our editor and after we've built our visual area, we can invoke a function where we can
call it play slide or play slides.
Let's create that one.
And we don't need to pass any arguments into it, but we do need to make some selections.
So let's select our slides using documents, query selector and this is query selector all so that we
select all of the available slides because of course we could have more than one.
So we want it to make it as dynamic as possible.
So selecting all of the slides, we need to also select all of the dots.
And this actually can be const because we're not changing the object and we can just use const.
So these are within this block of code.
So we've got our dots.
So using the same format and this time it's query selector and as well query selector all.
But we're selecting the element with the class of DOT and these are corresponding with the classes that
we've added in.
So we've got my slide class, the dot that we're adding, and we also want to set one of those to active.
So selecting our active element and I'll show you how we're going to add that in so using query selector
and we should only have one element with the active class, let's put them in the console just to make
sure that everything is good before we try to do some type of action with them.
And active right now should be null because we don't have any elements with it and this should actually
be placed slides.
So make sure that it's placed like try that out and you can see that now we have the place slides,
so we list out all of those values that are contained in there.
So starting at line list number 99.
So we don't have anything for the slides.
And that is also because I had set it as my slide.
And so always a good thing that we do check.
So now we've got our 100.
So it has a node list.
So it's selected all of the slides span dot and that's the list over here.
So we've got the divs with the my slide.
So these represent all of the images that we have.
These represent all of the dots.
And as you can see, when I hover over them in the visible area of our browser, you can see that that
also highlights as well.
And then we've got NUL for octave, so everything looks ready to move on.
So opening up our Aitor will make it big again.
So we've got a connection to all of the elements and that we need to utilize.
And there's one thing that we do need to do now.
We need to make use of our slide index value.
So this is a value that's going to increment and we're going to increment it every time we play slides.
And this is going to be right at the end.
So slide index is going to increment by one.
And that also means that we need to check to make sure that our slide index so our slide index plus
one, because we know we're adding one to it is greater than slide's length.
And the reason that we do slides length, we know that within our array are a node list.
We've got a length of three.
But if we're using an array, a zero based index value, we're starting at zero.
So that's where we need to add in that plus one so that both of these matches, so they're both starting
at either one or you can subtract one from sleights length so that they'd both be starting at zero.
So they both need to have the same starting point.
So if it is larger than we can take slight index and we'll equal that to zero, so we need to start
again back at the original slide.
So now that we also got that, we need to go through the slides and for each and selecting each one
of the elements that has a class of my slide.
We're looping through there and we're going to take that element, apply a style and we're going to
display none on those.
So that even though they are hidden in the overlay, it's always a good idea to do the display down
and then we could actually remove the overlay if we wanted to.
So the next thing that we want to do is take slides and using that global slide index of value because
slides is a node list or it operates as an array.
So taking that slide index value as our index value for the slide that we want to look at, we take
style and display instead of display none.
We set a display block so it is visible.
So that's going to actually show up our slide.
And in order to move it along, let's take our global object of Taimur, use the set time out method
and JavaScript and we're going to call back to the plate slides function and we can change the slide
every three, three seconds or three thousand milliseconds before we try it.
There's actually one error because there's a bracket here that should be closing off this builder function.
So instead of having it down there, I'm going to add it here within the console of my images.
And this is also where we need to invoke the place slides.
Otherwise we've got it within our loop and we're going to run it multiple times.
So I think we're ready to try this out.
So open up and refresh.
So we've got our first image.
We wait three seconds, we get our next image, wait three seconds again, get our next image.
And now we should revert back to the first image.
So everything seems to be working properly and we're ready to move on to the next part of this where
we're going to be outputting, where we can add the ability for the buttons, the dots indicators to
be clicked.
So that's coming up next.