OK, so now that we have the talent that's done, we want to jump into the JavaScript and we want to
make this function so that when we click the arrow, it slides the background image and also changes
this image.
So let's first bring in everything we need.
We want the body itself, which we can get from the document object and then body.
And let's grab the slides.
Now, Slide's is more than one of the slide classes.
We have five divs with the class of slides.
So we're going to use document dot, query selector all because there's multiple.
So we want all with the class of slide and then we want the right and left buttons.
So there's a const left vts and set that to document.
Dot will use get element by D because we have an I.D. of left and then we also want the idea of right
and we'll call this one right button.
And then I'm going to initialize a variable here called Active Slide so we know which one we're on.
It's going to start at zero and then we'll have a function say function and we'll call this set B.G.
to body.
So this is going to set the background to the body.
And I'm actually going to go in the style access and get rid of on the body here.
Remember, I put I hardcoded the background image.
I'm going to get rid of that.
So we don't see that there anymore.
And we want to, in this function, take the body and add a style of background image.
So when we deal with access through JavaScript, it's going to be Camil case like this.
You're not going to use dashes or hyphens, whatever.
So set the background image to and we're going to have our slides now.
Slides is when you use this query selector, all this is going to be what's called a node list.
So it's similar to an array and we can say, you know, slide zero for the first one, one for the second
and so on.
We're going to put the active slide in here, which starts at zero.
And then we want to do dot style dot background image because that's what we want to get.
So we're getting we look at our HTML, we're getting the first slide, which is this div here, right
here.
And we're getting the background image, you URL, which is going to be this, and we're going to set
that to the body.
Now we want to call this.
So I'm just going to go right above this and say set B.G. to body.
And if I go ahead and save that now you can see we have our background image, our first image.
Now we want to be able to set the active slide to the next image.
So let's also create a function called set active slide.
And what we'll do is take the slides that we brought in, which remember is a node list and we want
to loop through.
I'm going to use the foreach method here and see for each slide and this is going to take an arrow function.
So for each slide, I'm going to take that slide and remove the class.
So if we do classless dot remove, we can remove a specific class and that's going to be active.
OK, so we're going to remove that.
And since we used an arrow function, we don't even need these curly braces.
We can just do that.
And then after that, for each, I'm going to take slides again.
That's the no list and take the active slide.
And I want to add the class of of active to that.
So class list.
Don't add and add the class of active now if I go up to the top here and I change the active slide to
one, it's going to have the background image.
The second one is the background image.
Change it to two.
It'll be the third one because remember, it's it's a no list, which is basically like an array.
So it's zero based.
And that's being changed down here.
We're setting the background image to whatever that active slide is.
So zero and then it's one to zero.
One, two, three, four.
Now, for the front image, we just need to change the class of active to whichever one we want to display.
So if I manually come down here and put it on the second one, that's going to show.
So what we'll do is add event listeners onto these arrows so that we can increment this active slide.
So let's go right here and let's take the right button and let's add an event listener and we want to
listen for click.
And once we do that, we're going to run a function using an arrow function.
So on the right button, we want to take the active slide in increment by one.
So we'll just do plus plus now we want to check for the end so we can say if the active slide is greater
than the slides at length, which will give us the total length of the node list, but we want to just
take one off of that.
And if that's true, then we want to set it back to zero.
So we'll set active slide equal to zero.
Now, once we set the active slide, we just want to call the two functions down below.
So the first one is going to be set, BGU to body, because that will set the background and then we
want to set the active slide.
All right.
So we'll save that.
And now if I come over and I click on this, you'll see that it'll go to the next image.
It changes the background, which also has that transition on it.
Remember, we added that transition to the body.
So you have that kind of stat, that effect there, that slide effect, or it's more like a stretch
kind of effect.
And if we get to the last one, it just starts over.
OK, so we have, let's see, first image, second, third, fourth, fifth, and then it starts over
so that functionality is done.
Now we're going to do essentially the same thing with the left button just in the opposite direction.
So I'm going to copy everything from the right button listener.
And let's set this to the left button.
And on Click, we want to decrement the slide.
So minus minus it's going to take, you know, take away one.
And we want to check for the beginning so we can simply check and see if active slide, if it's going
to be greater than, I'm sorry, less than zero.
Then we want to set the active slide to the end to the last one, which is going to be slides, dot
length, slides, dot length and then just minus one off of that.
OK, and then again, just call set background to body and set active slides.
Now I can go forward and go backwards and if I'm on the first one and I go backwards, it takes me right
to the last one.
All right, cool.
So that gives us a nice little slideshow, obviously, this itself isn't too useful.
I mean, I guess it would be if it's like an image gallery.
But I mean, I want you to just kind of understand the whole logic of this, bringing in the all the
slides with Querrey Selecter, all having the background change to whatever the background images for
that specific slide and then looping through all the slides, removing the act of class and then adding
the act of class onto the next one.
OK, which is going to be either, you know, increment or decrement, depending on which arrow we click.
So that's it.
Hopefully guys like this project.
Let's jump into the next one.