Image Slider with JavaScript | Telmo Sampaio | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Image Slider with JavaScript

teacher avatar Telmo Sampaio

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (56m)
    • 1. Intro

    • 2. HTML Body

    • 3. Connecting JavaScript

    • 4. Adding Slider Arrows

    • 5. Connecting Slider Arrows with JavaScript

    • 6. Adding Slider Dots

    • 7. Connecting JavaScript to Slider Dots

    • 8. Css Transitions

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class we are going to learn how to build a Carousel Image Slider, this is a great project to test your Front End Skills, and an awesome opportunity to enrich your Portfolio Website.

In order to follow and take the best out of this class you should have a basic knowledge of:

  • HTML
  • CSS
  • JavaScript

But dont worry, I will cover everything at a very slow pace, and explain each step of the process, if you have any questions, post them down and we will be happy to help you :)

Meet Your Teacher

I'm Telmo Sampaio, a full stack web developer from Manchester, UK. I love to share what I know through my training courses, teaching and speaking on my youtube channel. Any questions get in touch with me, I would love to meet you!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Intro: Alright, guys in this project, we're gonna build the carousel slider and we have in here the arrows that we can swap. Between this different sliders, we can put as many as we want. So we have these arrows in here and we also have these thoughts like indicating in each Which one off the sliders. We had a at the moment so we can see in here. We had in the first. We're in the second where in the third, and we can add as many as we want. So for these course, you just need to know the basics of HTML and CSS in a little bit of job is great. But don't worry, because I'm going to cover everything the most important things that you need to know. And I'm going with a very slow pace. So you can really understand This is a really good project. If you want to put something on your portfolio and that is just, like demonstrates that you can use javascript like in a really professional way and the Yeah, I hope you are excited to start this project. So I'll see in the next video 2. HTML Body: Alright, guys, let's start our project. And the first thing we need to do is open our code editor. I'm using the visual studio code, as you can see here. But you can follow along with any of the other called editors that are many out there such sublime atom and many others. You can do a quick Google search. I like to use visual studio cold. It's free. And if you wanna join me doing this project using exactly what I'm doing here, just you can download it this free. So once you do it, let's start with the file new file, and I'm going to save these as index dot html. So I'm going in here. And where is it? I'm going. I have these these folded in here, and I'm going to call this one index dot html. Okay. And now I'm gonna do is I'm gonna type html Visual studio called Is this kind of ended abbreviation that if you click, there is already a snippet of code, so you don't have to type everything all the time gonna put in here the title for our our Blodgett Kara's cell slide. The and I would have put in here a H one and in here. I'm gonna put car Rossell, slither, And I'm going to start in here with a Deve. The class of slides. I'm gonna put the combo case in here. Slide show. I couldn't say no corn tainer. Okay, so we got a TV in here, and what I needed here now is I'm gonna put three sliders, so I need to create three thieves in here. Oops. Let me just get rid of I'm going to call these Deve with the claws of my slides. Okay, I'm gonna have three of those. 123 Okay, we got this one, and this is what I need at the moment. I don't need anything else. Now. I'm just gonna go in here at the top, and I'm gonna put a AM link for the CSS. Look, there is another snippet in here, so I don't have to type everything all the time, So I have a link with the relationship of style. Shit. This is where I'm gonna put my my CSS file and the full that is going to be I'm gonna go in here. This is my my father, where I put my index dot html when you create the folded in here called CSS like it thinks organized CSS And inside there, that's where I'm going to save these file. So I'm going to do CSS and inside. I want to call this file main about CSS. Let's create these file now save as and let's go inside the main dot CSS I want to call it mainly dot CSS Gonna put my body is a background color of blue just to make sure that we have the the correct one. Blue Open. He's in here. Uh, I'm gonna go up. Open these and look, we're carousel slide in here. That's what we have in the background Color blue. So it's working. This is what I wanted. Now, OK, we got a lot these backbones in here. This is the skeleton of our m of our the project. I just want to do in here. Let me just get rid of these. I'm gonna put the star. This is just like to target everything in our and in our project, basically, and what I like to do is just put a parting of zero and the margin of zero in als the elements as well as putting a books, sizing border books to just make sure that if I set up with is gonna contain all the parties and margins to have the exactly with of the elements that I want. Okay, so I got this one in here. Now I just need to put a little bit of styling. I wanted my h one to ever text a line of center to be centered on the page. I want to have a margin top of 80 pixels, and I want to have a margin. Bottom off. Ah, 50 pixels. Okay, let's see what's going on in here. So I got my Carcelle slander title and then off course, I have these lives in here that at the moment they are not showing anything, but we're going because they don't have nothing. Look, they're completely empty. That's why we don't see nothing. So what I want to do in here now is basically Ah, I'm gonna put a class in each one of them. And so because each one of them, they will have to get a an image of background. So I'm gonna put in here. For example, Deve one Deve to and deep three. So this is the classes that I'm rd and now in here, I can actually target my give one. I'm gonna put the coma so I can target them all at the same time. So Deve to and then deep three. Okay. And I want them to have a height off 500 beats. ALS. I want to have a weave off 100%. Okay. And you're going to see now why? I'm gonna put these 100% and I'm gonna put a background background colon of ah, let's say rats, okay? And I'm gonna put my board there border of one big. So solids block, and I'm gonna put the margin bottom of 10 pixels. So this is all the thieves. They're gonna have these. Look, I set these up is a week of 100% because all these dips, they are inside of these slight show container. Okay. And this slideshow container I'm gonna put in here. Look, slide show, bash container. I'm gonna put that I want to have a margin zero out all to be centered on the page, and I'm gonna put a marks with off 1200 pixels, and I'm gonna pull to just the text. The line inside. Toby, all centers. Okay, Lance, refresh, thes. And look, we got our first carousel slide in here the second and the third. Okay, so this is obviously is still not completely styled as we want, but we are getting in in there. No, because we we, um in here. Look, the thieves are completely empty, but we gave them height, okay? And the with the with these would be 100% off the parent. And the parent is saying that it has a maximum with of 1200 pixels. So, as you can see, this is 1200 pixels. Okay, so we got this one. Now, let's just, like target individually each one of the thieves and give them a background. Okay. Eso I'm gonna put in here, for example. My Deve one is gonna have a back ground image off you r l And in here I'm gonna put the URL . Let's seen here. Look, we are writing down this cove in here on the index dot html. We need to go inside. No, actually, sorry. We are writing down these in into the CSS into the main dot CSS. That's the correct one. Okay, we are writing down in here, and then we're going up, and then we need to going toe images, and then we choose the image that we want. So let's go back in here. So we need to go up one level because we are inside of the CSS for them. We need to go up one, and then we need to go into the images folded. And then let's see what kind of image I got the beach. Okay, so I'm gonna put in here beach dot j pay. This is the extension off the image. Each image is gonna be different. Look, this one says in your item type JPEG, they could be GIF, or it could be PNG. There are a lot of different kinds of extensions for images, so I got this one in here. I also let's see, how does he look, by the way? Okay, I'm gonna refresh and look, but the image is not looking that great at the moment. Look, So what I'm gonna do in here is I'm gonna put there background size, so back ground size Toby covered. So this is to make sure that is going to show the most of the image as much as we can. And I also want to center the image on these partying here that we have. I'm gonna put in here back, um, background position, back ground position. And I wanted to be on the center center on the X, like, horizontally and center vertical. Let's refresh and look. Now this image is completely centered, like horizontally and vertically, and we can do the same now for the other two. Okay, so let's copy these one up when the booties one in here and now the dif too. If you remember, there was one that was lopped off to It's seen here. Laughed off to in sunset, and this was sun set. And look, we are repeating the same code for a love them. So what we can do east, because all our thieves in here they have the class of my sliders. We can actually put these are We can even put in this one in this. Selected in here. We can cut these one out, and we could put it in here. Look And now we can shorten our code a little bit more. And deputies look So let's see. How does he look like at the moment? Let's refresh. This is fine. This is fine. There is something in here. They're okay. This is the three. Okay, let's refresh. And this is fine. So we got all of our three defeats that we're gonna transform into the slider like I said. Eso. Yeah, basically, that's it. That's what we have now for the foundation of our the carousel slider. And in the next video, I'm going to start adding some JavaScript so we can have some kind of interactivity in here , so yeah, I'll see the next one. 3. Connecting JavaScript: All right, guys, welcome back. And in these really, we're going to start adding some JavaScript into our project. So the first thing we need to do is going in here to our index dot html And let's first of all, why creates a new file that is gonna called main? Let's create a new folded in here new folder. Let's call it J. S because he's going to be for over JavaScript. Let's go inside. Input main dot Js This is the name of our filing here, and I'm gonna doing here and console Don't war. If you don't know a consul don't Lock is just for us to best things out in JavaScript is not gonna affect our our project in any way. But it's just going to give you some information if our code is working fine or not. So I'm going to put in here, um, file. He's working if the file is working. So I'm gonna put in your final is working with the safeties. And now we need toe added in here on the script and I'm gonna put to the source he's gonna be Js the folded that we just created and then main dot J s. Okay, that's going toe our browser. Refresh the page. And now we should open the developer tools we didn't control. Sorry. Right. Click inspect on the base, or you can press F 12. Look, you got the developer tools in here on the right. If you click on console, I'm gonna increase the size of these a little bit so you can see better file is working. So we got these message that we were looking for. Okay, so now we can go back in here. I'm actually going to increase the size of the text in here so you guys can see better other if this is too much, but I think likely should be fine. You guys could see Well, so we got this one done. I'm gonna What I'm gonna do in here, first of all, is I'm going to create the function that is gonna hide or is gonna hide all of these deeps . Okay. All these sliders. This is the first thing I'm gonna do. So I'm going to start with the cons caused show slides gonna be equals to a narrow function . Okay, This is how you declare the narrow functioning here. This is like from the latest year six syntax. And I'm just adding these toe constant show slides because it's not going to return anything different is gonna do the same thing all the time. So now what I'm gonna do in here is basically select. I'm going. I'm going to select Elise elements in here. I was like, this one. This one and this one using the documents dot Get elements my class name into the class. Name A. Love them. They have my slides. Okay, so I'm going to do my slides. Look, I don't need to put a dot in here from before, so I'm going to select these and I'm what I'm going to call. These is called these. Ah, clones slides. Okay. Okay, So is inside now. So slides is gonna thought to get all of these ones. So if I do a console, both log of slides. Okay, let's do these. Let's refresh the page. Uh, okay. Something he is not working. Jasmine o. J. S okay, because this is inside of our function. For a function to run, we need to call it. Okay. We need to say function. Start to run. So to do that, we just put the name of the function and we put the parentheses, and now all of these inside should run. Okay, look, now we get the HTML collection that is basically grabbing all the elements. Like we said, Look, this is the 1st 1 hopes this is the 1st 1 you see is getting a highlight that this is the 3rd 1 And this is the that. This is the 3rd 1 year, so 1st 2nd 3rd we got all of them. So Okay, this is like an array now. And for me, toe access each one of them individually. I have to do something like a four. Look, I'm gonna do it for let I equals zero. I'm gonna start my countering zero. I'm going to say that my I he's gonna be a last less than a length. Uh, slides don't length. So the slides dot length is the number of elements that we have. We just seen that these three, but we can do a consulate log just to make sure that is correct. Then I'm gonna do I Plus Plus, this is just to make sure that we are iterating one by one. Okay, So I'm gonna do in here just for you to see a corn sold those log, and I'm gonna put in via these. The number off slides east Put the space. I'm gonna put the coming here, and now I'm gonna put slides. I'm gonna copy these. Slight start length. This is all developers. They already burning all the time to make sure that we are getting the correct values I'm going to refresh. Look, the number of slides East three. Okay, that's what we are doing in here. We'd slide scott length because this one, like I said, he's grabbing all these elements 123 in the east putting them inside of an HTML collection . That is gonna be like an array. That's why we can loop through them and we can get the length. Now we are doing this four looping here, toe. It's each one that we're gonna eat. The rate is gonna put a display of none on them. Okay, so I m Let's see what we can do in here with these. I'm gonna do in here something like these. I'm gonna do my slides, okay? And my slides is gonna be equals two. I okay, slides I in the first time that this is running is starting at zero. So it's gonna be slides zero, and then we're gonna put dot style dot display okay, equals to none. And obviously, first of all, the let I equals 2 to 0 in the first run after we have in here, I post. Plus, these means that if he's starting with zero after is going toe one in here and after is going to to and sees two is less than three in here. It's going to stop. OK, is going to start on Lee from zero until two. And this is the numbers of the array. If you understand in here, like an array, the first elements is going to be, Let's say that I have something like these. Like I'm just putting something. Like I said, you guys should know these already, Bob, just like explaining quickly, Let him. These first element of the array is the position zero the 2nd 1 position worn, and the 3rd 1 is position to I'm gonna put in here is something like these zero one two okay, and this is what's happening in here. The first time is starting with zero. So basically, is grabbing these first defeat after this cold is running, this is a four loop. So it's still going to the next one in here, so it's gonna be one. So after is gonna be one is gonna hide to the 2nd 1 and then is going here toe to, But then he's gonna check, Okay? He's too less than three, because this is the length is true. Yeah, but if you try to run after again, he's going to be in here. That three is less than three. No. So it breaks down. All right. So hopefully you guys could understand this party in here. Eso Yeah, let's put these back toe I and I'm going to refresh, And as you can see, all of them, they are gone now. But what I want to do in here now is actually wants to do something like these slides. And then I'm gonna put for example, the 1st 1 the zero, and I'm gonna put style Dr. Display of Lord. Okay, if I refresh, Look now, only the 1st 1 easily explained block. I could put for example, the 2nd 1 in here. Look now, only the 2nd 1 What? I couldn't put the third. Okay, Only this one is. But this is not what we want to put. Want to put these dynamically. And how we gonna do this is we're going to create the variable here on the top, and we're going to call these variable like the slide index slide indexed is going to be or originally equals to one. Okay, to say, like put example, Let's go back in here that this position is one. This position is through this. Push it volition is three. Right? Okay, so we got this one in here. So what I'm gonna do is whatever the position we are in at the moment off visible, I'm gonna put that the slide index at the moment is one. And I'm gonna put in here that to the slide index minus one. He's going to be equal to the display block. So, for example, look in here. Initially, the slide index, he's one. So if we are going in here, this is gonna be one miners. One is going to be zero. So the 1st 1 the first ah element to display is gonna be this one. As you can see, one mine is one. And let's see the images. Um, what is it, like, index on this place? So this should be fine. So that's let's go and refresh. All right, let's refresh thes. And as we can see, this is fine. So this is the 1st 1 off the of the thieves, which is displaying. But now we could pass in here. Look, the show's slide this when we are calling it, we could put actually the whatever value we want. So I'm gonna put in here When I started these, I can put like n like is gonna be correspondent toe the number of the slide index that I want. And I could go in here now, basically, and pasties in here, in and in here. I'm gonna put the slide index. Okay. So first, the first time, this is the first time that I'm This is the first time that I'm calling these. I'm going to say that this slide, the index is going in here, and we're gonna pass sitting toe here, and this is gonna passing here. Okay, let's refresh. This is all fine now. OK, what? What can we do as well about thes? We got this one this playing. Now we can actually start putting our arrows in here, on the left and on the right, so we can actually attach some kind of function so we can go to the next slider. So we're gonna do these in the next video, so I don't keep these videos like for too long, and that's it, guys, if you have any questions like I said, just put them down below and I'll see in the next video. 4. Adding Slider Arrows: All right, guys, welcome back. And now we're gonna create our arose so we could basically click on them to go to the next slide. So what I'm gonna do in here is I'm gonna after all my difc I'm going to create a anchor element with a class of the previous, For example Just gonna put in here for now. These hashtag just temporary. Um, I don't think we don't even need these at the moment. I think we just need these class, and I'm gonna put in here another one with the claws of next. Okay? And at the moment, if I refresh, you are not going to see anything, because this is empty. But I'm gonna put in here a code for the arrow of the left and the code for the arrow of the right. Okay, if you don't know what I'm going, what I'm doing in here, you can just basically goto Google. And if you put something like, um html code html code symbols, something like these that is going to be like loads of places look like these. You can see all these symbols copyright, euro copywriters. There is so many, many things that you can do. Look, you even have these kind of clouds, son, that you can put with some kind of HTML codes. Ah, but yeah, this is the call that I'm using in here for the arrow left and right. So let's see. How does he look like? Look, we got in here. One left, and we got to yet of one. Right now. Let's go to our main docks. ES says, let's start styling these one up and I'm gonna do is I want my previous in my next IRO. Okay? I'm gonna have them to have a cursor of pointer. So whenever I over with my mouth, he's gonna turn like a hand. Look, um, breathe next, Okay? Because they are still empty. This is the problem. Okay, we're gonna fix these in a second, and OK, these this is like these. We're gonna put this. I want to have a position of absolute. And if I put these as a position absolute, which is this one? I need my slideshow container toe have a position of relative because we're going to move things relative to the parents. Okay. When you put these, I want them to have a weave of out so can have whatever we've. And I want to have a top off 50%. So it's gonna be center vertical e. Look, the adding here. As you can see now, I want to put them a little bit more to the top, because when you put them like least they're going a bit too down. So I'm gonna put the margin hope off. Maybe minors. Um, 22 pixels, for example. Minus 22 pixels. And I want them to have a Let's see a cooler of white. It's refresh. Look, they're stealing here. You can see now with with a cursor. Look, it's working now. Uh, what else may I'm gonna put the parting between them a parting for bottom left and right of 16 pixels. Let's refresh. You can't see really well now because I need toe still put them each one to the next side. I want them to have a forms weight off bulls. Toby. A little bit bolder. I want them to have a phone size of, let's say, 18 pixels. Let's see, How does he look like? Yeah, I still need to put them to the sides. So What I'm gonna do now is I'm gonna grab this one. My brief years. I'm gonna put it on the left. Zero. Okay, So the previous now should go in here to the left. Look, and the right is still in there. So what I'm gonna do about thes is I'm gonna grab my right one. I'm gonna grab my right, and I'm gonna put ah not right. Sorry. Next. I'm gonna grab my next, and I'm gonna put the ride. Zero refresh. Look, it's in here on the right now and OK, so what can I do about these? I want now that all of them they will have Ah, let me see. Ah, I want them to have a tea. Maybe I want to put them like a kind of a background caller. I want to give them some kind of background color. I think it would be it would be good. Um, so, yeah, let's let's put them in here. A background, Uh, or 1st 1st Yeah. This is what I'm going to do first in here. I'm gonna put my previous and my next I want to when we over them. Okay. When we over them with a mouse. So one over. I want tohave a background Kohler off rgb a and this is RGB is just going to be like for Alfa. Okay, so that is going to be some opacity. If I put 00 zero, this is gonna be the black code for the RGB a. And then the last value is the opacity. If you put one is going to be completely opaque, if you're gonna put 0.8 is gonna be almost opaque. But look, with some transparency, you can still see it beat of the background. All right, so we got this one covered now, but we never were over with the mouse. The transition is too fast. So what I'm gonna do in here is I'm gonna go in yet. I'm gonna put the transition, and I'm gonna target the transition for the background color for the background color. And I want to happen in 0.6 seconds and with is in out. Okay, look. Look how niceties. Okay, we got this one covered. Now, Um, okay, we can also put maybe a margin top. Ah, I don't know. I don't know. Uh, let's see, Maybe what I can put. I already have this one. I also want to put the text decoration off. None. Okay, because usually how are anchored elements? They have some kind of thing under, like, unending line. And I don't want that. This should be fine for now. Look, this is fine in here, and but I want to give them some kind of a border, some kind of border radius. So I'm gonna put in here on my previous a border bore the radius off. Let's say zero pixels on the top, Three pixels on the right, Three pixels on the bottom, left and on. The top left is going to be zero. OK, so this is stopped. Right Top Botham, Top left toe. Ah, bottom left top. He's like he's like the clockwise. So top right bottom right bottom left top left? Yeah, like thes. And this one in here, I'm gonna put the border radiators off. I could put for his about three pixels in here and then 003 pixels. It's refresh. Let's see. Yeah, now is a little bit of a border radius, so he's not, like, completely sharp the edges. Um Okay, so we got this one now, all style in here. Now, we just basically have to connect these these, um, dots that we have in here with our with our functions that we have in here. So I'm gonna do this in the next video, so I'll see you there. 5. Connecting Slider Arrows with JavaScript: All right, guys, welcome back. And now we're gonna actually connect our arrows that we just build before with our JavaScript file so we can actually go to the next slides. So first thing I want to do is create a function in here called const. Plus Slide is, for example, plus slide is and it's gonna be equals toe arrow function. Okay, ends in here. I'm gonna pass it like a parameter in here and for example, and what we're gonna do is we're gonna call our function that we created in here from before. And we are going to say in here that the argument in here, whatever we pass in here, is gonna be equals to the slight index. Whatever we have at the moment, and this one is going to be equals to whatever we have at the moment. Let's in here. We have slide the necks of one. So this is gonna be one plus whatever number we pass in here, okay? And whatever number we have in here, this is one. So this is one plus one. Okay, so I'm actually gonna put n in here, okay? So if we go now in here We need to attach these in here now, so I'm gonna put in here on click. So if we click this one No, not this one. I want to do that. The plus first. Okay, so I'm going to do on Click. This is part of the HTML. This is nothing new. So on click, I want to run this function in here plus slides, and, uh, when I want to run these functions, I want to pass the number one. Okay, So look on click plus slides one. So if we were in here, plus slides, this is going to be replaced by one. So show slides dysfunction in here is gonna run with a slide index. I'm actually going to put in your slight index. So we are all this in the same page. My slide index is going to be equals to the slide index. Whatever we have at the moment in a row on the top. Plus, in this end, in here is thes one. So look, slight index is gonna be one plus N is gonna be one. So this is going to be one plus one is going to be too. All right, so to, and these function is going to run. So this is we we covered already and is going to display only the slides plus slide index, which is to from here. Okay, so to mine is one is one. Okay, so the position of the array now is going to be 01 Okay, so this is gonna be now one, which is So this is position zero. This is position one. So there's gonna display this one, and obviously, if you please keep clicking, let's refresh and see. Oops. Um, there's something in here. I need to save these. Let's see. Let's save these unexpected token online 16. Okay, let's see what's wrong in here. All right? Okay. We can see that. I forgot to put in here my arrow for the IRA function. Okay, let's refresh. And now look, this is fine. Let's click in here. Look, now we are going to the 2nd 1 We're going to click again, is going to go to the 3rd 1 And if I click again, look is breaking down, okay? Because we are getting out of the scope. So what we can do in here, basically for this kind of situation is I'm gonna put in here a if statement that is going to say it, my end. Which is this one in here that we're gonna pass all the time. He's gonna be more than the slides Thought length or or three if you want to. I want that my slide index is gonna be equals to one. So I go back, I'm gonna even put in here a console dot log so you guys can see what's going on. Um, I'm going to get rid of these. What a putting get council. Both Lord, my slides. Full position piece. Okay, I'm gonna put the comma. We'll put the common, and I'm gonna put in here the slides position is going to be, um, is gonna be this one. Okay, Slide index, miners one three fresh. Look, my slide position in the beginning when we're starting down, is zero. Because this is the array position. If I click again my slide position, he's one. And again, my slide position, he's too. So he's the last one. Okay. Zero for the 1st 1 in the array. 1st 1 for the second and second for the third. Now, if I try to do again. Look, it goes back to the 1st 1 so it's like resetting it. So we got this one. Now we just need to do the same for the back button. So for the back button, I just need to create the on click in here and put the miners one, and he's gonna work the same way. But look, I can go to the front. I can go to the back. But now, look, if he goes like miners than one, it's gonna break. So we need to put another condition in here. And this condition is gonna be if my end is going to be a less than one. Okay. I want that my slide index is gonna be to my slides index both length or or three if you want to. So this should, um, keep our website from breaking. All right, So look, let me refresh thes. Um, okay, lets see. There's something in here that I for God's all right. This is, like, not slide, index, But my slides, This was the mistake. Let's refresh thes. Now let's go to the front. Let's go to the back and look all the time resetting so there is no problem with this one now. Okay, so I guess that's it for these video. Now, we can actually now just put our dots in here and just like, um, click and check, whatever, whatever current. So we are at the moment, so I'll do these in the next video. 6. Adding Slider Dots: All right, guys, Welcome back. Let's now build our dots in here so we can click through the carousel slides. So let's go back in year to visual studio code. And in year on the bottom, I'm really created the with the class of thoughts corn saying okay. And inside, I'm gonna create the span with a class of dots, and I need three of them. Okay? At the moment, if you try to refresh, you are not gonna see anything, all right, Because they are empty. So let's go to our main dot c. A sensing here and what I want to do, first of all, is I'm gonna create my thought. And I want that whenever I hope over them. I have appointed with my Mauser with my mouth. Sorry. I want them to have a height off 15 pixels. A. We've off 15 big souls. I want them to ever margin off 02 pixels. Okay, this is so they have some space between them. I want to have them. I want them to have a background colon. Oh, harsh BBB. So this is gives, like, a kind of a grayish color. I want them to have a border radius of 50%. This is just so they look like, Uh, yeah, bro, We can't see them yet. We can't see them yet because sponges by before the added displayed in line. So we need to give them a display of in line blocking. First of all, so we can actually put all these styles. It's refreshed. Look at them here. They I now I want them to also have a margin from the top margin from the Thorpe off 20 pixels. Let's see. Here they are. Yeah. And now, whenever I over them with my mouth, So I'm gonna put in here a thought. Thought over. I want them to have a back ground. Kohler off 7171 slight, please. A bit of ah, beat of Ah, yeah, darker grey. But this is going too fast. So I'm gonna put in here a transition, okay? And a transition that is going to affect my back group ground. Kohler, 0.6 seconds and is gonna be just is refresh. Look much better now. Okay, So I want to put them Aziz. Well, some kind of a class of active, some kind of class of active, um, that if they are active, they're gonna have this kind of background. So I'm gonna put in here active. He's gonna have these kind of background coladas. Well, so we got this one now out of the way. So basically, it's refresh. Look, and this is fine. So that's it. They are styled now. And in the next video, we're gonna actually connect them with our JavaScript file so we can click through them and go to the next slide. And just like what we have in here with our arrows, so I'll see in the next video. 7. Connecting JavaScript to Slider Dots: All right, guys, Welcome back. So let's go in here toe or the visuals to your goat into our main dot Js And let me just get rid of this Council of log is just like putting some stuff in here that we don't need anymore. I'm gonna creating here constant target, allow our thoughts, and I'm gonna call them thoughts, and this is gonna be equal to a document. Got get elements my class name in the class e's dot If you guys remember, look from here, all of these three. And now this is going to give me a HTML collection that you get treat like in the rape so we can do at four loping here to look through all of them. And we're gonna do the same thing just like up here. So let I equals 20 Okay, I less then, um Daut. Daut length. Okay, dots don't Length is going to be I lust blows. Okay, so we're gonna look through all of them. And what we're gonna do is if if my thoughts, I the one that we are looking at the moment thoughts class least don't corn contains the class of active this is to make sure that these elements that we are looking at the moment contains the class of active. I want to select these thoughts. Okay. And I want to do a dot class lease thought remove the class of active. If they have a class of active, we're going to remove the class of active. This is what we are going to do. I'm a collaborative, this council, that log. And now in here, I'm gonna do my thoughts. Something has before in here. Slide index minus one God's. This is just like, whatever slide we are at the moment, I'm gonna apply the class name. So the class lease. But I can put like, class names so you guys can see different class name is gonna be equal. So plus, I could put glass, least glass, least the odds, and I'm gonna odds the glass of active. Okay. Ah, let's refresh and let's see. Look, now I have a class of dots in here and the class of active as well I'm going to the next one. Look, now, this one in here is the class of active and this one No, and same in here. Now, if you try to click in any of these ones is not running yet. So what we can do now for it to work is just create another function here. Let's call it const. Current slight current slide, and this is gonna be equals toe a narrow function. Okay, I'm gonna pass in the year, and you can put whatever you want. This is just like a blaze holding, and I'm gonna do exactly the same thing like we have in here. But this time, instead of putting these slight index is gonna be incremental because we don't want to increments. We want to go exactly where we want. Okay, so we need to go in here now. And on all of these spans, you just have to put that one click. He's going to be equal to the function that we want to run. And this function is going to be current slide for the 1st 1 We're gonna put currents life one. Oops. Let's put these correct current slide one for the 2nd 1 We're gonna put currents life too. And for the 3rd 1 we're gonna put current slide three. It's refresh and let's see Bom bom bom and here it ease completely working. Fine. Look, now we are We are just like, basically in the end, guys. Now, the last thing that I just want to do is just out some kind of effect when we are going through the next ones just toe to make it this kind of bells and whistles, like people say, to make it a little bit more beautiful, the project. So the project is basically that, like I said, let's just, like go for the final video where we're going to do some kind of nice transition between the slide. So also in the next video 8. Css Transitions: All right, guys. Welcome back. So now we're gonna add these kind of transitions between our sliders when we click. So first thing, let's go in here to our visual studio coal tar index dot html And let's on the class of fade. Okay, this class, you can put whatever name you want are just giving it this one, faith, because this is going to be some kind of a fade effect. Like I said, you can use whatever name you want. I'm going to hear now to the main dot CSS. And I'm gonna target now this class of faith that we just created in them. Now we're gonna do something in here from the CSS animations called Animation, Animation. Dash name. And what is the name of our animation in here? This is completely up to you. You can put whatever name you want. The animation that I want is gonna be called fate. Okay, These names, they could be different. Okay, They are completely up to you. So I'm gonna put the fade, and this is the name of the animation and the animation Animation duration is gonna be 1.5 seconds. Okay, this is the name. But look, you have to be careful, because these kind of animation, sometimes they are not compatible with moves era or with Firefox Order with safari. So you need to put this kind of Web kids. Okay, so where Keep name I'm gonna put it fades, for example. And now I'm gonna put where kids and duration and 1.5 seconds. Always make sure to put your were kids first and last the normal ones without the web kit. Okay, Now we're gonna target these animation fade that we created in here. So if you create in year, for example, fade one or my faith for Izabal my fate now in here you would have to go in tow. Key phrase. Okay. And you're gonna put, for example, my fades. And this is the animation that we're gonna do I'm gonna do from. So this is where is starting the animation from the opacity of passivity Off 0.4. Okay. Until two. Now I'm gonna put in here the capacity off one. I'm going to say these. I'm gonna refresh and let's see, you see. Look at these. Nice innovation. And basically, that's it. Guys, this is This is the only thing that we were missing, this kind of animation. So now looks a little bit better with this kind of transition fading from one to another. And I hope you guys enjoy these project. This is how you can actually taste your skills with JavaScript and just like progress. And if you think if you got a little bit confused the first time that you went through the course, just go through it again. This is what I advised. Don't just go through it one time, go through it again and try by yourself doing don't just, like, copy what I'm doing. This is the best way that you're gonna learn. And if you have any questions as usual, to send me an email or just pushed them down in here in the comments and I'll get back to you. So that's it for the project guys. I hope you enjoy it and I'll see you in the next one