Jonas: 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 keydown 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
=== '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 its own function.
Now you might have noticed
that here we also could have used like short circuiting,
so we could do e.key
=== 'ArrowRight'
&& nextSlide();.
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 here we actually already have a div,
so an element for that.
So we have the 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 I'm nicely organizing
the entire code of this slider here
into different functions,
and so that's a good pattern to get used to, all right?
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'll have this data attribute of slide
with the number of the slide
that clicking the button will go to.
All right, 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.
And in this case, it's not even gonna be about the slides,
it's just so that we can do it four times
because we have four slides.
So we have the 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 0,
then 2, 3, and 4
so that in the next step
we can then 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 createDots.
So createDots,
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.
All right, let's check them out here
just to see the data-slide attribute ,
and indeed 0, 1, 2, and 3.
And now let's actually make them work.
So adding another event handler here.
And I'd 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__dot.
All right, and if so,
let's just log that to the console pretty quick.
So here we get dot,
if we click outside somewhere, nothing happens,
and then again dot and dot.
All right, so let's get the slide
so const slide
is = 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 dataset
and then dot this value, so .slide.
So .slide.
And to make it even better,
we can now use the structuring
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 the structuring 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 dataset.
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 it 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 change 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 had 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 deactivated 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 forEach of them,
so let's call it dot,
we want to say dot.classList.remove
this class --active.
So that's the first step of removing all the active classes,
and then we will add it
only 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 complicated,
so let me show you how.
So a document.querySelector,
and so here the query
is gonna be a little bit more complicated.
So it's still dots__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 used these brackets
to select for 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=,
and so they should have exactly the value of slide.
And so then the selected dot
we can add to the class list 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 2.
So write 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, the style.
But yeah, it's very hard here,
so let me change the class here.
So let's actually change it to white,
so reactivate 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 0.
So activateDot(0);.
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 a knit.
So an knit 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 then our functions,
let's just write that here as well.
And this one, we don't need anymore, 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 still.
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
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 pass 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,
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.