7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.3 CSS Slider

Hello and welcome back to Practical Web Animation. In this bonus project, I wanna talk about creating a very, very light weight image slider using only HTML and CSS. When it comes to image sliders there are a lot of plugins out there that you could use, most of them either in JavaScript or jQuery. And a lot of those come with a lot of bloat, a lot of them have a lot of features that you're never going to use. And sometimes you just need a really simple animated slider. So in this lesson, we're gonna do that again using only CSS and HTML. Now our HTML is gonna be very simple. We're gonna have a div with a class of slider. And inside that div, we're gonna have three slides. So I'm going to type div.slide times 3. And then tab, and that will create all of those div's for us. And that's all we need for our HTML. Everything else is going to be in CSS. We're gonna be using background images for our slides. So let's jump into CSS and let's start styling this. So again, our containing div has a class of slider. And for that containing div, all of our images, first of all, have a width and height of 320 pixels by 240 pixels. So we're gonna do the same thing for our slider here. We're gonna give it a width of 320 pixels and a height of 240 pixels. And then just so we can see something in our browser window. I'm gonna give this a background color, maybe a light gray color there. And there we go, we can see at least how large our slider's going to be. And let's actually brighten that up a little bit. So I'm also gonna give it a border. I'm gonna give it a 10 pixel border, a pretty big one 10 pixels, solid. And I'm gonna give it a border color of 888 kind of a medium gray color. And then I want to center that. So I'm gonna give it a margin of 0 space auto. So there's the basic skeleton of our slider. Now we're gonna go into our individual slides. So .S-L-I-D-E, that's the class name we gave to each of our div's that are going to have an image in it. And we're gonna give it the same width and height so we might as well just copy and paste it. And for now that's all we're gonna do with the slide class. We'll do some more in just a moment but the next thing I wanna do is to add our background images. And I don't want to, make you watch me type all of that out, so I'm basically just going to copy that and paste it from elsewhere. And there we go. So as you can see each of these slides, we're using this nth child pseudo selector to point to all of the individual slides. So the first one is going to have this particular image applied to it. The second one is gonna have a different one, etc, etc. And you'll notice that I've also included an animation delay here and I'll explain those in a couple of minutes. But that's what we've got to start with. So obviously, we don't want our slides to show up like this we want them all to be in the same spot. And I'm gonna be fading from one to the next, so we don't need to slide any in from the left to right, we're just going to be animating the opacity of these items. So I want all of them to appear right on top of this first one. So the way we're going to accomplish that is we're going to give our slider container a position property and set it to relative. That way we can set our slides inside it to a position of absolute. And then, we can basically stack them all on top of each other. And they automatically go there. But I'm gonna go ahead and specify, anyways. That we want our top to be 0 and our less value to be 0. So now they're all just stacked there on top of each other. And now I want to turn them all off. So, the way we're gonna do that, is we're just going to set our opacity value to 0. So now all of our slides are gonna be invisible once again. So now I wanna used a key framed animation in CSS. And the way we're gonna do that is first, we're gonna create our animation down here at the bottom using the keyframes keyword. And the way this works is we type in the word, keyframes. And then we give our animation a name. And this is just gonna be fading from one image to the other, so I'll just called this fade. And then we're gonna put all of our keyframes inside curly brackets here. So inside these curly brackets, we're gonna create a few separate keyframes that are going to define how our animation occurs. And so we wanna think about how long we want this animation to last. What I wanna do is, I wanna create an animation where each slide is on the screen for about five seconds. We're actually going to fade in over the course of one second and then it's going to stay in place for four seconds and then it'll fade off over the course of another second. So it actually be there for a total of six seconds, but our second slide is gonna be fading in as the first slide fades out. So it's gonna be kind of an overlap there. So all in all our entire animation is, we've got four different images. It's gonna take about 20 seconds. Because each one's gonna last about five second or six seconds with a one second overlap. So we know for a fact that at 0% or at the very beginning of our animation, we want our opacity to be 0. And because these keyframes are in percentages, we have to kind of think through it, and figure out the math for what percentage of the way through the animation these things are going to happen. So again, our very first animation is going to occur over the first 25% or one-fourth of the entire animation. So if the animation lasts 20 seconds long, then the very first image, I should start fading out at about 25 or at exactly 25% of the way through that animation. So we know that also at 25% our opacity is going to be at a value of 1 but it's going to get to a value of 1 way before this. Let's say that we want it to fade in from 0 to 1 over the course of the first 5%. So I'll just stay at 5%. We're also gonna set the opacity here to a value of 1. So it's gonna animate from 0 to 1, over the course of 0% to 5%. And then for the next 20% of the animation, it's just gonna stay at 1. And for the next 5%, we'll go to 30% here. We'll set the opacity back to 0, so let's just copy that and paste it. And that's all we really need because for 30 through 100% of the animation. It's gonna stay invisible because that's when all of the other animations are taking place. And so now we'll see why these animation delays are here, so our first animation, you'll notice our very first slide does not have an animation delay. It's gonna start animating right away, so right when the page loads it's gonna start animating through these four keyframes. Well, again, 25% of the way through this first animation, that first image is gonna start to fade out and at that point we want the next one to start to fading in. So, at 25% we want the next one to fade in. And again, if this whole thing is gonna take 20 seconds, then 25% is gonna be exactly five seconds. So, that's why our second one has a 5 second animation delay and each one of this increases by 5 seconds, our third one has a 10 seconds delay, our fourth one has a 15 second delay. So now we need to actually create the animation, we've created the keyframes four but we haven't actually started the animation yet. And we're gonna do that in the slide class here using the animation property. So we'll point to again the animation property and we're gonna point to the name of the animation that we created, and if you remember we gave our keyframe animation a name of fade. So we're gonna point to fade here and that will point to those keyframes. And it's gonna last 20 seconds, so we'll say 20s, and then we want it loop forever, over and over again, so I'm gonna type in infinite here. That way all of these animations, once they start playing, will loop over and over again, infinitely. So we can start to watch those animations, there's the second one. And then the third one, and fourth one is not showing up and I think I know why, yeah, it's going to blank. I think it's because only included three slides here. Actually need four of those, so let's add another slide and that should take care of it. Because we had three div's with images in it, but we had to find four separate images and we included timing for four images. So we need to make sure we get that right. But after this one, we should see the orange juice image and there it is. So that's how you create a very simple looping animated slider, using only CSS. So thank you for watching, and I'll see you next time.

Back to the top