Original subtitles

(Instructor) Let's now build

the really cool slider component.

And this is going to be a lot of work.

So we're doing that in two parts.

And so here goes Part 1.

So this is what the final version of the slider looks like.

So we can click these buttons here

to move between the slides,

and you see that also the dot down here then changes.

And as we read the last slide,

as indicated by this last thought.

If we then go to the next one,

it will basically go back to the first one like this.

And of course, we can also click on the dots like this.

So let's not understand how this is actually implemented

in terms of HTML and CSS because as always,

that's a very important aspect to make this all work.

So this is the slider component.

And then each slider has a couple of slides.

So three slides and they are in fact, all side by side.

So we have slide one, make the smaller here,

because the content doesn't really matter.

So you have these three slides.

And so you see here by this blue area

that they're all side by side.

So here in the slider,

we can turn off this overflow property

which is set to hidden and then you can actually see

the next slide already waiting there, basically.

So what happens when we click this button

is that all the slides move a little bit to the left side.

So watch until you see that now the first slide is here,

the second is in the middle and a third is right here.

And that happens by using this transform CSS property,

which we then set to translate x.

And then here, we define these values to basically

move each of the slides as we click these buttons.

So watch what happens here in these values as I click.

And so now the last slide here is basically at zero percent.

The one before is that minus 100.

And the one before is at minus 200.

So minus is basically to the left,

and the width of each slide is 100.

And so basically, this is all we need to do

in order to make this slide work.

So basically adapt these percentages here as we go.

So you see that now the first slide is zero percent,

then the other one that 100 and a third one,

which is all the way to the right side, is now at 200%.

So this is basically the starting position of the slider.

And let's compare that to what we have currently

in our slider.

So we have all of the slides

basically on top of each other right now.

And so the first thing that we should do here

is to basically establish this initial condition

where they are all side by side.

So like this.

And so what we're going to do on each of them

is to set this transform property to these percentages.

But of course, all automatically.

So let's start here with our slider.

And as always, I'm going to start with some selections.

So starting with the slider,

or actually with the slides themselves,

so that we can then manipulate them.

So document.querySelectorAll.

And so that's a slide.

So with the class of slide and we can also of course,

see that here in our own HTML.

So you see, here we have the slide.

Now the content that is inside of each of these slides,

is completely irrelevant for our purposes.

So all we are concerned with is the slider element,

and then this slide.

So this one and all the others.

So I can collapse these just to see.

And so yeah, we are only going to be concerned

with the slides and then you can maybe

use this for your own projects in the future.

And put whatever you want inside these slides.

For example, you could just have images,

or really anything that you want.

And in fact, that's what I have down here.

So here I only have some images,

and maybe we should actually work with that.

So let's actually try that.

So I will comment out this part.

So not really sure how that works anymore.

And so now let's make this actually visible.

Just to see.

So these are our slides now.

But once again, they're all on top of each other.

And we can see that here when we inspect them.

So indeed, all these slides are in the same position.

And so let's create that starting condition

that I mentioned a minute ago.

So putting all the slides side by side.

So let's take the slides.

And we're going to loop through them

and set the style on each of them.

So let's create a simple arrow function here.

And the parameters, I will just call S for slide.

And then we also need the second one, which is the index.

And you will see in a minute why that is.

And so here, we want to set the style on each of the sides.

And remember, it is the transform property

that we want to set.

So transform, and then we want to set it to translate x.

And then here is where we have to specify the value.

And that value is going to be in percentages.

And let me just write down here what we want.

So the first slide should be at zero percent,

the second should be at 100%, then 200%, and then 300%.

And so that's because translate x

will basically move them to position 100%.

So the width of each of these images is 100%.

And so then the second image

will start right here at the end of the first one.

Then the third one will start right after the first one,

which is at position 200% and then 300.

So how can we calculate these values here?

Well, we can simply multiply 100%.

So here, we need now a JavaScript value.

So we can multiply 100% by the current index.

So in the beginning, that's going to be zero.

So zero times 100, is zero.

And then, as you see, it will go all the way until 300.

Because in this case, we have four images or four slides.

But if we were working with the other slides,

then that would only go to 200%,

because we only have three slides.

So that should already be enough.

And now we have this problem,

that our sections here keep disappearing

and that's because the code we wrote earlier.

So reveal sections.

And so for now, let's remove this observer.

While the observer can actually stay,

what we need to remove is these hidden classes.

So now that works.

And so let's check out the images now.

And we can really see them.

But indeed, they have now zero percent, 100, 200, 300,

and so on and so forth.

Let's maybe temporarily scale down the entire slider.

So let's come here to or let's do

that actually here in JavaScript.

So just to make this a little bit easier for us to see.

So const slider is document.querySelector, slider.

And then what I want to do

is slider.style.transform, and set it to scale.

Let's say 0.5.

Yeah, so that looks a bit better.

Now, we just need to change that overflow

that I just showed you before.

So that overflow here, we need to set to visible.

So also on the slider.

So otherwise, we cannot see the other slides.

So let's do that as well.

So overflow, and we need to set it

to hidden or actually to visible.

Let's make this even smaller actually.

Even smaller, just so we can see all the images.

So you see now all the four of them are here.

And our buttons are not really small.

So they are still here.

But I think we will be able to work with this.

Maybe we can just move the whole thing

a little bit to the left.

So let's say translate x here as well.

And keep in mind that this has nothing

to do with the functionality.

Okay, this is just so we can see what we are doing here.

So this works.

Now we can move it even further.

And so now we can make it a bit bigger again.

So that's beautiful, that works for now.

And then by the end, we will simply remove all of this.

But now let's actually get to work

and make this slider work.

And so I will start by selecting these two buttons.

So that's the button left, query selector.

Let's see here.

So that's slider button left and button right.

And then simply duplicate it.

So button right.addEventListener.

And let's start by only working now

to make the slide go right,

so clicking just on this button here.

And I think we're not even going to need the event for now.

Okay, so this is basically to go to the next slide.

So remember that going to the next slide

is basically simply changing

the value here in the transform property.

So this translate x,

all we will do is to change the percentages.

So that basically the slide

that we want to move to is the one that has zero percent.

So remember that this is what we did here.

So right now the active one

is the one that has zero percent,

and the previous one has minus 100 and the other 100.

So again, that is the whole mechanism

that we're using here to move the slides.

And so this is what we will do now.

So in the beginning, we are at slide zero,

but then when we want to go to the next slide,

we need to increase that.

So let's outside here, create a new variable

for the current slide.

So let current slide and it is a let

because we will of course, then update it.

So we start at zero and then when we go to the next slide,

we simply increase that by one.

All right, and so right now, it is one.

And then what we need to do

is to basically do the same as this,

but with a small change.

So let's say that the current slide is one,

then we do not want this here.

We don't want this, but instead

we want the first slide to be minus 100.

This one zero, this one 100, and the other one 200.

So how do we do that?

Well, we take the current index,

and then we subtract the current slide.

So again, we will take this,

so each slide that we're looping over,

and then minus the current slide.

So like this, and then this will give us

exactly what we want.

So again, let's say that the current slide is one.

Let's write that here, actually.

And so then as we loop over these slides,

in the first iteration this will be zero,

and then zero minus one will be minus one.

And then times 100 is of course, minus 100.

Then the next slide, the index is one,

and then one minus one is zero.

And so that will then become zero percent.

And so remember that the active slide

is exactly the one that we want to be zero percent.

And so this should now actually work.

Let's see and yeah, it is already moving.

So the first part is already doing its job.

But now we are kind of at the last slide here.

So let's see what happens next.

So it actually keeps going.

So the number of slides keeps increasing.

And so of course, these values here also keep increasing.

Because, well, JavaScript doesn't know

that we are working a slider

and so of course it doesn't stop.

We need to tell it to stop.

So how can we do that?

Well, the best way is to actually define

the number of slides and then make it stop

once we reach the last one.

So let's say that the next slide.

So the maximum slide where we can go is slides.length.

So basically the length of this node list here,

and our node list, we can also read the length property,

just like on an array.

So here when we define the value of the current slide,

we now need to update this a little bit.

And so if we are at the next slide,

so if the current slide is equal the next slide,

then we want the current slide to become zero again.

And so that's how we return to the beginning of the slides.

And otherwise, we will simply increase the slides by one.

Okay, so let's test that here.

So everything keeps working.

Now we are at slide number three.

And so we are at the end.

But actually, this next slide is four.

So the length is four, but the index is three.

And so as always, that's because

the length is not zero based.

So probably it will keep going one more time,

and then it will return to the beginning.

Yeah, beautiful.

All we need to change here is to add minus one to this,

to basically also make this zero based.

And so now, let's see.

Well, our slider is basically already working.

So at least in this direction, so this button of course not.

But here, we can see that it's doing its job already.

So that's really nice.

Let's now just quickly refactor this code a little bit.

So we have here, basically the exact same code,

or at least almost the same code as here.

But we can refactor this into its own function.

So let's grab this here.

And I will create a function now called goToSlide.

So that's a function where we pass in the slide.

So basically, the number of the slide

where we want to go to and then here,

we change the current slide

to the slide that we are indicating.

And here, I can then call this goToSlide

with the current slide.

So far, we didn't change anything.

Just delete this comment here.

And now to be able to remove this part here,

all we need to do is to basically call this function here,

right in the beginning of our code

with the slide set to zero.

So this slight argument set to zero.

And so what this will do is then basically,

once our application starts,

it immediately goes to slide zero.

And so that will then execute basically this code.

So slide will be zero.

And so i minus zero is then of course just i

and so that's 10, exactly what we have here.

So go to slide zero.

And so now I can delete this.

And that's great.

Then to make this just a bit more beautiful,

let's actually also take this one here,

and create a new function for that.

So const nextSlide and put it here.

And this one doesn't need any parameters.

Because the goal of this is really just to export

the functionality into its own named function.

And so indeed, it keeps working just as before.

Next up, let's then work on this button here.

And so all I need to do is to add an event listener

to button left.

Also click and then I'm going to create

a function called previous slide, or just prev slide.

So let me create that here very quick as well.

So const, brief slide.

And so in this case, the current slide will be decreased.

And then here, I can simply reuse the same function

that I already wrote before,

and also with the current slide.

So the functionality of moving to a slide

is of course exactly the same

no matter if we go forward or upward.

So all this will do is to update

the transform property on all of the slides.

And that works in always the same way

no matter if we're going forwards or backwards.

So the main difference between the next

and the previous slide is really the way

in which we determined the current slide.

So when we go to the next slide,

we basically increase the current slide.

And when we go backwards, so to the previous slide,

we simply decrease it.

So let's try that now.

And first we need to go forward,

because our functionary is not really complete.

But in this situation, it already works just fine.

But then as we keep going,

we have the same problem as before,

because we simply keep decreasing the current slide.

And so we now need to fix that.

So in which situation does simply decreasing

the current slide not work?

So it works right now.

So now it works.

But now it does not work.

And so that is in the situation

where the current slide is already zero.

So that's right.

If the current slide is zero.

So in this case, the current slide

should be equal to the next slide.

And again, that's minus one,

because that next slide is not zero based.

And then else and so now,

that should actually work.

And indeed beautiful.

And so now, our slider is actually working already.

We are just missing a couple of features.

So namely, these dots here,

which is a little bit complicated to implement.

And also in this version,

we can use the arrow left and arrow right functions

to move through the slider.

So now I'm just hitting the left button,

and the right button.

But I'm going to leave that for the next video.

For now, let's just get rid of these things

that we did in the beginning,

so that we can see the actual slider

in all its beauty (laughs).

So now, it does indeed look like a real slider,

doesn't it?

So I'm really happy with this result.

And I hope that you're as well.

And of course, I wouldn't expect you

to be able to write this code on your own just yet.

So when we implement something like this,

there is a lot of stuff to think about,

especially in this case,

the most tricky part is in my opinion this here.

And this probably comes from experience.

And so at a certain point, if you practice enough,

you will also be able to come up with a logic like this.

So I just invite you to study this code

here a little bit before we move on.

And once you're done doing that,

then let's move on and implement these dots

at the bottom of the slider that I just showed you.