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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.1 CSS3 Carousel

In the first of our bonus lessons we’ll be building on the concepts we already learned about when creating pure CSS3 sliders. In this project we’ll be creating a more advanced transition style by turning our slideshow into a pure CSS carousel.

Related Links

4.1 CSS3 Carousel

Hey this is Kezz for Tuts Plus, and I'm back with five bonus lessons for our CSS3 projects here. We're gonna be working with the same kind of projects that we did with the first ten. Just building on it a little more. And giving you a few extra projects of the same type that you can use keep expanding on your CSS knowledge and experience. In the first of our five bonus lessons, we're gonna be creating a pure CSS Carousel. Now fair warning, this is not going to be exactly like a JavaScript-powered carousel. And that's just because there's a couple of things that you can't do with pure CSS that you can do with JavaScript. Of course that's why we use JavaScript, but this is a fairly close equivalent. So you can look at these just a learning exercise to keep building your new CSS skills. Or if you really need a pure CSS alternative for a carousel or even just a fallback, then this could be particularly useful for you. So, we're using the same method that we did with our pure CSS anything slider, where we're using the check property on an input field to allow us to identify which of our little buttons here is checked. And then we're using that to go through each one of our slides. And then we're using transitions to animate the movement between one slide and the next. And a bit of CSS trickery to get this behaving as close as possible to a JavaScript-powered carousel. So this is the completed pen. Just like with all our other projects, there is also a base pen that you can fork. So that we can get straight into the good stuff, and you don't have to spend a bunch of time typing out base code. And speaking of not spending a bunch of time on typing, I don't want you to have to sit there and watch me type out a heap of code, so most of this is gonna be copying and pasting chunks in. And I'll explain exactly what's going on in each chunk of code, line by line. And you'll also be able to access that completed pen, so you can make a reference to each one of those chunks as you go along. All right, so let's jump in. Right now, what we have is just each one of our slides just sitting in a great big stack. And the first thing that we're gonna do is add some default styling for each one of our slides, as well as the image that's contained inside each slide. So we'll just make a little bit more space in our CSS window here, and we'll scroll all the way down to the bottom. And then we're gonna add in this CSS. And that looks a little funny right now because what we've done is, by default, we've set every single slide to be smaller and off to the left-hand side. So, that corresponds with this location and size of the slide here. We're making that the default, so that them when an item is selected like this one or is next up in line like this one, we can modify that default card to position these slides where we need them to be. So we have our slide content class here, is-targeting This div here that holds each one of our images. And then we're also targeting the actual image inside that div with this code here. So we're setting the width and height to be a little bit smaller than the image that's at the front of the carousel so that it looks further away. We're positioning it absolutely so that it has that position off and to the left. And then we're just making sure that with the image, every image fills up the full space of the slide. Even if its aspect ratio is a little bit out or its size is a little too big or too small. And the next thing that we're gonna do is target the selected slide, the currently active slide, and pull that back up front and center at its full size. And we're also gonna put a box shadow underneath to, again, give it more of a feeling of coming forward and being closer to you than the other slides. And we're gonna do that with this code. This is a lot like what you did in the anything slider project where first we look to see which one of our input fields is checked. Then we looked for the very next sibling after that input field that's named slide label. So just to show you up here as we go along. So here's our input field named slide-switch, which corresponds with this. Then we have our label, with the class name slide label, which corresponds with this. And then after that the next sibling is the div for the class slide-content. And we target that with this. Now this plus sign tells the browser to look for the very next element in line. And to also make sure that it matches the provided class name. So in our styling here, we're resetting that with the height back up to the full 100% in both directions. We're resetting The positioning so that it's no longer off to the side. We're adding in a box-shadow, just to give that effect. You can see the box-shadow here. We're setting the opacity to 1 because we're gonna have some other slides later that are gonna have an opacity of 0. So we just wanna make sure that our selected slide is always visible. And we're bumping the z index up to make sure that that active slide is always going to sit in front of any other slide. So now we can already go through and have any one of our slides appear in front. But we don't have any type of nice transition. So we can actually put that in already, even though we're still fairly early in the process of creating this full carousel. And we're gonna add our transition in onto the default slide styling. So we're just gonna add this in, so we're setting a transition. We're targeting the top left and right values, which is the position of our slide. We're targeting the width and heighth and also, the box shadow and we're making sure that each one of these transitions lasts for one second. So, now, when we have a slide transition in between its default state, over here on the left and the selected state, we get a nice smooth animation from one to the next. Now obviously, there's still a few things that aren't right about our carousel. For starters, we don't have any image over on the right-hand side. We've set all our images to be on the left side by default. What we want is that the next slide in the rotation is over on the right-hand side. So if we have the first slide selected, then we want the second slide to be waiting in the wings over on the right-hand side here. And the way that we're gonna do that is by using that plus sign again that allows us to select an adjacent sibling. And we're gonna go all the way down each of the elements until we've reached the next file in line. So we're gonna add this code. And then we have our next slide up in line, pushing itself over onto the right. Now the way that we're doing this is, we already used these three selectors here to grab the selected slide. So we're just using those same selectors again, only without that checked property to get the next slide in line. So it starts with the slide-switch of the current slide. And then it goes down one, two, three, four, five, elements further until it reaches the next one that's supposed to be coming out. And then, we're changing the absolute positioning of that slide. We're changing the z index. Again, so it's always in the background. And we're changing the opacity to 1, so we make sure that it's not invisible when we need to see it. And once again, we have a nice transition as we go through the rotation from one slide to the next. Now the next thing we're gonna look at is trying to make it so that our carousel goes in a full circle. That's one of the things that's sort of expected from a carousel is that when you reach the last slide, you see the first slide up on the right here. Now, this is where it's a little bit tricky with CSS. Because, in CSS, you can select any element that comes after a particular element. But you can't select anything that comes before a particular element. So we can identify that this switch here is checked, that there's no way to go back up the elements to find this slide in order to be able to move it. So to allow us to put the first slide over on the right here when the last slide is selected, we're actually gonna have to physically move that slide in the HTML. So the way we're gonna handle this is, we're gonna make sure that we're at the first slide. And then we're going to cut this slide out of the position where it is, making sure that we leave the input field and the label just where they are. And then we're gonna go all the way down to the bottom. And then after the last slide, we're gonna paste in that code that we just moved. And now we're gonna need to change the class on this. Because by moving this first slide all the way down to the bottom, we're no longer gonna be able to use those plus symbols, the adjacent sibling selector, to find this first slide anymore. So instead, we're going to use a class name to find this slide, so we're gonna add in first-slide. And while we're here, we're also gonna need to have a class name on the last slide for something that we're gonna do a little bit later. So we'll just add that in as well. We're just adding space, last-slide. Now we're ready to go back into our CSS. And you'll notice that immediately our first slide is not styled in the way that it should be. So to make that behave like the other slides, the first thing that we need to do is go back up to our default slide styling and add in our first slide class. And we also need to add in the same thing for our image styling. So what we're gonna have to do is directly target that first slide class. And make sure that when the first slide is selected, that image is in the right location. And we're going to do that with this code. So there we go. That's fixed up our first slide and put it back where it's supposed to be. The way we're doing this is we're still making sure that we identify when this input here is checked. And we can know if the first of these input boxes is checked by using first-of-type against our slide-switch class. And then also making sure it's checked. So now this selector here will only take action if the first of these input boxes is checked. Now this little ~ is a little bit like that + symbol, but instead of only looking at the very next sibling, he can look for any sibling that comes after. So now this selector is gonna start Here at the first of our input switches. And then it's gonna look all the way down this chain until it finds that first-slide class. And that is what allows this selector to target that first slide only. I just realized I'd left a test background color in there. You're not gonna need that. Other than that, what we've got here is pretty much the same as you already saw with the other selected slides, where controlling the width and height of the selected slide. We're placing it correctly, adding a box shadow to it, setting its opacity. And making sure that its z index sets it way in front of any other slide. You probably notice that something is missing again. We now no longer have a slide on the right. We still have a slide on the right if we have any other slide selected. But not if we have the first slide selected. And that is because this series of selectors doesn't actually work with our first slide anymore. Because we don't have these exact six elements all stacked one on top of another when the first slide is selected. Because this first instance of slide content is no longer where it was, cuz we moved it all the way to the bottom. So what we're gonna need to do is add in the selector that's almost the same. But it counts for our change in markup. So we're gonna do that by adding this code. And now we've got our image back on the right, even when the first slide is selected. So this time, you can see we're just skipping that first instance of the slide-content class. Now, there's another little problem that has been introduced that we need to solve. And that is that sometimes as you go through each of the slides, that first slide is staying visible when it shouldn't be. And what we need to do to solve that is just target that first slide class, and then just set its opacity to 0 by default. So now we no longer have that first slide showing out when it's not supposed to. But you probably noticed now when we have the second slide showing, we don't see the first slide on the left. So the first thing that we're gonna have to do is identify when the second slide is the one that's currently active. And then target that first slide and move it over to the left. We do that with this code. So the first thing we're doing here is using nth of type with the number 2 passed by here to identify when the second of our slide switches is checked. And then we use the ~ again to go all the way down through our markup, until we find that first slide. And then, we set the opacity of that slide back to 1. So now the first slide sits where it's meant to when it's selected. And it moves over to the correct location when the second slide is selected too. And something you might've noticed as we go through is sometimes over on the left, you're seeing slides that you don't really want to see. And that's because, by default, all the slides are visible. So what we're going to do is add in a little code that targets any slide that comes after the one that's currently selected and sets its opacity to 0. So we'll scroll through now. And now you don't see those lingering images over on the left, but we have another problem now. And that is that when the first slide is selected, you have nothing on the left. This is where that last slide class that we added into our HTML before comes in handy. So now what we're gonna do is whenever that first slide switch is checked, we're going to look for the item with the class, last-slide. And we're gonna move that over to the left. So this, again, is very similar to the code that you've already used. And you can see that now our last slide is over on the left where we want it. So once again, we're looking to see if the first slide switch is checked. Then if it is, we're traversing down to HTML until we can find the last-slide class. And then we're changing the positioning, the opacity, and the z index to correctly position that last slide over on the left. So now we're almost there. Every one of these slides looks correct all the way through, until we get to the very last one. In the same way that when we have the first slide selected, we took the last slide and put it over on the left. When the last slide is selected, we want to take the first slide and put it over on the right. And we're gonna do that in much the same way with this code. And there's our first slide now over on the right. This time, instead of using first-of-type, we're using last-of-type to identify when the last of our slide switches is selected. And then we're doing the same thing again. We're using that ~ to go all the way through the subsequent sibling elements until we find the first-slide class. And then we're changing their positioning to put that slide over on the right where we want it. So now, we've got about as close as you can get to a fully functioning pure CSS carousel. And you'll notice that there's a couple of little inconsistencies, where slides will move a little bit differently depending on where you're at in the order. But because there is no way to select a previous element in CSS, only a subsequent element, there isn't really any way to work around that until we get some type of previous selector in CSS. Which, from what I understand, is not on the cards any time soon. So, with a little trickery, we have, for the most part, a working CSS Carousel with no JavaScript. In the next bonus project, we're gonna be doing another spin on the slideshow. And instead of doing a Carousel, this time we're gonna be doing a Flipbook. So we're going to set it up so that it looks like when you're paging from one slide to the next, you're actually flipping pages over in a book. So I'll see you in the next lesson.

Back to the top