Let's now continue building
our slider component.
And let's actually start by attaching an event handler
to a keyboard event
so that we can also slide through the slider
using the left and right arrow keys.
So let's do that after these ones here.
And remember that we actually handle keyboard events
right at the document.addEventListener.
And then we're gonna use the key down,
event and so that's gonna be fired
as soon as the key is pressed down.
And here we need the event.
And let's start by taking a look here at the event.
So that we can figure out
which keys we actually want to use.
So I'm gonna hit the right arrow key.
And so you see that we get the key here as ArrowRight.
And then the other way around, it is of course ArrowLeft.
And so I'm gonna use that key, ArrowLeft and ArrowRight.
So, that's very simple.
If e.key equals ArrowLeft,
then what we want to do is to call the previous slide,
function, right?
And so this is also a reason why I created
a separate function for this.
Okay, so otherwise, I could also have left the entire code
just here, instead of exporting it into its own function.
I still prefer it like this,
but it wouldn't have been necessary.
But now as we need to reuse the same code here as well,
then I really would have to create it, in its own function.
Now you might have noticed that here
we also could have used like, short circuiting
so we could do e.key equal ArrowRight,
and next slide.
So this would work the same way
because of short circuiting, right?
At least I hope so.
And yeah, it does.
So I just hit the right key and here the left key
and so it works just as fine.
So you can now choose which version you like the most
so I'm gonna leave both here,
and let you decide which one you want to use.
Now right, but now about the dots that I was talking about,
let's go here to our HTML
because, now here we actually already have a div
so an element for that.
So we have two buttons of course, these two
and then we also have this empty container,
in which we're gonna create the dots.
So let's start by selecting that element
and I'm gonna call it the dotContainer.
So that's just dots,
I think, yeah that's correct.
And so let's start by creating all these dots in there.
So I'm gonna create a new function here.
So basically, nicely organizing the entire code
of this slider here into different functions.
And so that's a good pattern to get used to , alright?
So just so you see what these dots will actually look like,
so each dot is gonna be one element
with the class of dots dot.
And then it will have this data attribute of slide
with the number of the slide
that clicking the button will go to, alright?
So one more time, the data attribute here holds some data
that we need in order to make the functionality work.
Let's actually grab this code here
so I'm copying all of it now,
and so what we want to do here now is to create one element
like this for each of the slides.
So the easiest way of doing that is to simply loop
over the slides,
because then we can do something for each of them.
But in this case, it's not even gonna be about the slides
it's just that we can do it four times,
because we have four slides.
So we have to slide again, and then the index,
but in this case,
we're really only gonna be interested in the index.
So missing the function keyword here
and actually since we're not interested in the slides,
we can again use this convention of the throwaway variable.
So a variable that we don't even need.
And so let's now say dotContainer.insertAdjacentHTML.
So as I mentioned, this is my favorite way
of creating HTML elements.
And so let's say beforeend so basically adding it
as the last child always.
And then here, we need the HTML code itself.
And so let me just paste that button
so that code that I copied from the demo site.
And now here, all we need to do is to add the index.
And so then the first button will get index zero,
then two, three and four.
So that in the next step we then can read this value
from here, and move exactly to that slide
once one of the dots is clicked.
So let's check that out.
Oh, and of course, we need to also call this function.
So in the beginning, we need to call, goToSlide
and also create dots.
So create dots.
And I will organize this a bit nicer by the end
for now let's just leave it like this.
Oh, and you see, we have the four dots now here.
Now right, let's check them out here just to see
the data slide attribute
and indeed, zero, one, two and three.
And now let's actually make them work.
So adding another event handler here
And I like to keep the event handlers or event listeners
here at the bottom.
And so of course, we are gonna use again, event delegation.
So we're not gonna attach one event handler to each dot,
but instead to the common parent.
And so that is of course, the dotContainer,
into which we just added the dots,
so addEventListener,
waiting for a click.
And now to actually match the element
that we're interested in,
we can simply now check for the class.
So that's event.target.classList.contains.
And then the class of the dots
is dots underscore, underscore dot.
Alright, then if so let's just lock that to the console
pretty quick.
So here we get dot if we click outside somewhere
nothing happens,
and then again, dot and dot.
Alright, so let's get the slide.
So const slide is equal e.target.dataset.slide
And so that's because it's called data slide.
And so as always, all the custom data attributes
are in the data set, and then dot this value.
So .slide.
So .slide and to make it even better,
we can now use destructuring because this value
is exactly the same as this.
And so we're reading from this object
and so we can simply do this.
So another nice use case of destructuring right there.
And so now, what we want to do is to basically go
to the slide that we just selected.
And so one more time, it's now very handy
to have this goToSlide function here,
inside its own separate function.
So goToSlide
and then with the slide number that we just read
from the data set.
So let's test that
and it works.
So slide two, let's see slide one
let's go straight to the last one,
and jumped over all the others
and now we are at the last one.
And of course we can combine this now with the buttons
and with the keyboard arrows.
And so yeah, great, this works as well.
Now all we need to do is to also show
which is the current slide.
So activate this dot basically.
So give it this different background color.
So that's also pretty common in a slider like this
and let me actually show it to you.
So all we do as always, is to give it a special class.
So the dots dot active class.
So let's go back and let's do that not here,
but in another function,
because we need this functionality in many places.
So whenever we change the slide,
we will also need to change the indicator here.
So no matter if we click on one of the dots,
or if we just use these buttons here,
whenever we changed the slide,
we want to change which slide is currently the active one.
And so we're gonna create a completely different function
for that.
And let's do it here after CreateDots
so activateDot
and here we need to again,
then pass in the current slide, basically.
So how will we do that?
Well it's gonna be a bit similar
to what we have here with these buttons.
So here we also have like an active class to show
which one is the active button here.
And to do that, remember, before we activated one of them,
we first dectivated all of them.
And so here, we are gonna do the same.
So we will select all of the dots,
each time that we want to activate one.
And we will then remove that active class,
and then add it only on the one that we're interested in.
So let's select all the dots.
So that's document.querySelector
and actually querySelectorAll,
and so the dots are the one that have this class.
And then for each of them,
so let's call it dot,
we want to say dot.classList.remove
this class dash dash active.
So that's the first step of removing all the active classes
and then we will edit on the on the one
that we are interested in.
So how do we select the one that we actually want?
Well, we can do that also based on the data attribute.
So that's gonna be a bit too complicated.
So let me show you how.
So document.query.Selector
and so here the query
is gonna be a little bit more complicated.
So it's still dots underscore, underscore dot
but now we want to select based on the data slide attribute.
So basically based on this attribute.
And we can create a selector for that.
So remember how previously we use these brackets
to select four images with a certain attribute
and so here we can do that as well,
and even check if they have a certain value.
So data slide equals,
and so they should have exactly the value of slide.
And so then, the selected dot
we can add to the classList or class.
So the active class,
just like this.
So let's say we pass in slide number two,
so we want to activate the dot corresponding
to slide number two.
And so here in this querySelector,
we can basically select the element with this class,
and with this data slide attribute set to two.
So right like this, okay,
and here that's active.
And so now, that should actually be working already.
All we need to do is now call this function here
in all the necessary places.
So when we go to the next slide,
we go to the slide of course,
and then we also want to activate the dot.
And also on the current slide,
and then the same when we go to the previous slide
activateDot with the current slide and finally,
when we click on one of the dots.
so activateDot
and here it's just called slide.
Okay, let's try that,
and did it work or not?
Well, it's hard to see, actually here
because of these images,
but,
yeah apparently it is working.
Although it looks kind of the same as all the other dots.
So let's change that here to style,
but it's very hard here.
So let me change the the class here.
So let's actually change it to white.
So we activate this one here,
now, and yeah, you can see that it actually works.
So now that's a bit better visible.
So that works just fine in all directions
so even with the arrow of course,
and when we click a dot, then the same works as well.
There's just one problem which is when we reload this,
then none of the slides is active.
So let's go back here and also in the beginning call
this activateDot function with slide zero.
So activateDot zero.
And so now you see the first dot is now active.
Great, so that's actually it, our slider is working now.
Let's just refactor our code just a little bit
and make it a bit better.
So for example, we have all of these function calls here.
So let's put them all in the same function,
which I'm gonna call init.
So an init function an initialization function.
So here we have our event handlers.
And then here, our functions.
So I'm calling the function that doesn't even exist yet.
So,
that's better.
And now I will simply put all of these here,
just so that we know a bit better what exactly
we are gonna do in the beginning, basically,
to initialize our slider.
And there should be one more,
Yeah that's to create the dots.
And that should probably happen before we activate any dot.
Otherwise that's not gonna work probably.
So here we have them or functions.
Let's just write that here as well.
And this one we don't need any more in fact.
And now just to finish,
let's actually put all of this code into a function as well.
And so this way, we do not pollute the global namespace.
So that's something we like to say.
And we're gonna talk a little bit more about this
also later in the course, though.
But for now just know that it is a good practice
to keep this kind of functionality here,
maybe in its own function.
So let me,
let me actually delete this one
and just put one curly brace at the very end here.
And then all we need to do is to call that function.
And that's it.
So now we have our slider working
and we could now actually even passed in some values here,
and to make this even more complete,
we could actually pass in, like some options here.
So we could make this slider function accept
a couple of options.
So an object, for example, which contains these options
and then work with that.
But that's a bit too much for this example.
But just know that this is a pretty common thing to do.
So great, this slider works
let's just actually go back to deleting these slides,
we don't need them anymore,
and put back our original content.
And so you will see then that it works just the same.
And indeed it does.
So I'm just gonna change the color of the dot back here,
and then that's it.
So everything works the same,
no matter how many slides we have.
So of course now we have only three dots,
but everything just works the same.
So the slider is really being built dynamically
based on the number of slide elements
that we create in our markup.
Okay, so we're almost done with this project now
there's just two more small lectures
in which we're gonna learn a little bit more.
And so after reviewing this code
for this really cool component,
let's then just quickly check out these final two lectures.