Original subtitles

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.