Demo and Responsive Behavior
In this video we'll create a responsive image slider using HTML5 and CSS3.
So let's take a look at it here before we get started with our image slider. As you can see it's going to slide through four different plant images here that we have laid out, and then if we flex the web browser down we're going to see that the image slides will stay 100% of the width no matter how wide or narrow we flex it to.
Okay so let's go ahead and flex this back up and then I'll show you what we need to get started. In the description of this video will be the HTML5 CSS3 slider starter files where I'm going to open up index.html with the free text editor called Sublime Text and then I'm also going to have index.html open in Google Chrome as my web browser as we're building the image slider. Also in the starter files will be all of the images included inside of the slider.
Okay so I'm going to put this down beneath the video here and then we can go over to index.html to get started. So I'm just going to write a little bit of text in here to make sure that index.html is connected to Google Chrome, which it is right here.
HTML Structure: Slider Container and Images
Okay so now let's go ahead and get started with our first tag. So the first thing that we're going to add is a div ID and we're going to call this slider. Then inside of our div ID we're going to use the HTML5 tag called figure which will contain all of our slider images.
Okay so img src and then img for the IMG folder followed by plant.png. So all of the names for our images are basically the same, so I'm going to go ahead and just copy this and paste it four times over to save us some time. So the first and last image will be the same, just plant.png, and we'll find out later when we're laying out our CSS why we have the first and last the same. For now let's go ahead and check Google Chrome and make sure that we have all five images displaying here, which we do.
Okay so now we can get started with our CSS. So let's go ahead and reference our div ID slider here with #slider and then we're going to say overflow: hidden. And then we're going to reference our figure tag here, so #slider figure, and then position: relative and we're going to give this a width of 500% so each slide image takes only 100% or one fifth of our slider.
Okay so we're seeing a little bit on the side here of the next slide, so let's push the first slide off to the left with margin: 0 and left: 0, and that's going to move it off to the left and we're still seeing a little bit of that slide here, the second image.
Image Sizing, Float, and Animation Setup
So next let's say animation: 20s because that's how long our slider duration is until it completes its rotation. Then we'll reference the slider ID name there and say infinite so it never stops.
Okay so next let's go ahead and style our images here. So we'll say #slider figure img and then we'll tell them to float to the left and we'll say width: 20% because when we divide 100% by five we get 20. So now if we refresh this second slide we're not going to see any of it; we'll have our first slide taking up the whole screen here aside from a little bit of padding off to the sides.
Keyframes: From First to Third Slide
Okay so now we can move down to the fun part: the keyframes which will allow for the slide movement along with the animation style. So we're going to say @keyframes slider to reference our slider ID and then open and close our curly brackets and then we'll say 0% left: 0.
Okay so then we'll say 20% left: 0. So as we know our first slide takes up twenty percent of the screen, so at 0% and 20% we don't want it moving to the next slide yet, so it's just going to keep us there on the first slide to start with, which is important for when we go around the full rotation back to 0%/20%.
So next let's say left: -100% at the 25% mark — so slide number two — and 45% mark. Okay so now if we refresh it's going to sit here on the first slide for a moment, then it's going to go to slide two and then slowly but surely it's going to slide back to slide one.
All right so let's keep going here. So next we'll say 50% left: -200% and then 70% left: -200%. This is going to bring us to the third slide here. Okay so now if we refresh we go from the first slide to the second and then to the third and it's going to bring us all the way back to the first slide but it's going to move a little quicker now as you can see.
Keyframes: Fourth and Fifth Slides and Looping Trick
So let's go ahead and get us to the fourth slide now at the 75% mark and 95% mark we'll say left: -300%.
Okay so left: -300% and now if we refresh we go from the first slide to the second slide, then the third and then the fourth. Now it's going to bring us all the way back to the first but a little quicker.
Okay so then lastly to get us to the fifth slide we'll say 100% left: -400% and then let me just show you why we have the last image the same as the first. So let's say that we call this plant3, so that is this image right here that we're seeing.
Okay so we'll go from the first slide to the second slide to the third to the fourth and then watch once we get to the fifth. So we'll land on the fifth and then it's going to change back to the first. Okay so what we're going to do is we're going to change that back to just plant.png and then once we get to the fifth slide it's going to change back to the first slide so we see that slide for the full duration. So while we have five images it's really a four-image image slider.
Wrap Up, Call to Action, and Outro
Okay so that does it. I want to thank you for sticking around with me through the tutorial. Please remember to like the video, comment, subscribe, and turn on your notifications. Then I'll see you in the next video. Thanks for watching.
