FREELessons: 7Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Customizing Carousels

For our fourth project, we’re going to customize a Bootstrap carousel by turning the slide indicators into image thumbnails.

Useful Links

2.4 Customizing Carousels

Hello and welcome back. In this lesson, we're going to create a Bootstrap carousel, but we're going to customize the indicators at the bottom of the carousel. And if you go to the Bootstrap website, again and go to the documentation and underneath components, find the carousel page and scroll down a little bit. Here's a carousel with just the slides. So it has no controls or anything. We go down a little bit further, we have the left and right buttons. A little further than that, then we have the indicators. And the indicators are these three small rectangles at the bottom and you can click on any one of these indicators to take you to the corresponding slide. And so we're gonna build a slideshow that's basically straight out of the textbook, it's gonna be straight from Bootstrap's sample code. But we're going to customize these indicators by putting image thumbnails in them. So I'm gonna take this code from the section that says With indicators. And you'll notice this code includes the left and right button as well as a couple of slides and the indicators at the bottom. So I'm gonna grab this entire block of code here and copy it, or you can just click up here in the Copy button in the upper right hand corner. And once that's copied, I'm gonna jump back over to CodePen. So I've got a starting CodePen open here, there's nothing in it, but the settings are already setup for you so it's already including Bootstrap and all the necessary files. So you can find that URL in your course notes. I'm gonna go ahead and click on Fork to create a new copy of it, and all of our changes will be in this new copy. So I'm going to paste the code that we copied and we have a couple of images here that need source attributes. So through the magic of editing, I'm going to replace these source attributes with some images that actually I have prepared. And then we'll move forward. Okay, so I've pasted our URLs here, and you'll notice I've added fourth slide. And then up here at the top, we need to add a fourth indicator. So I'm gonna grab the last indicator here and copy it, and on the next line we'll paste another indicator here and we're going to slide-to-3 there. And 3 is gonna be the fourth slide. And then we'll go down to the bottom, and if we stretch this out a little bit, we can see the HTML a little bit better. Here are our controls, our left and right button for our slideshow. So we can see by default that everything already works fine. The default controls are working just like we'd expect them to. The left and right button are working as well. So now all I really wanna do in this particular project is to take these indicators here at the bottom and turn them into image thumbnails. So if we scroll back up to the top of our HTML, we can see that these indicators are really just list items. And since they're list items, we can do whatever we want to with them, and what I wanna do is I wanna throw some images inside them. So I'm going to nudge down the closing list item tags here to put room for images in between them. And I'm gonna pull in four image thumbnails that I've created that match the images that are in our slideshow. So I'm gonna grab each one of these thumbnails and just copy them into place. And then we can move on with customizing the look and feel of these thumbnails. So there's our last one right there. And so now we've got these images inside our indicators but you'll see our indicators are still, they haven't changed at all. We can't see those images because Bootstrap has specified a certain size for these indicators. So what we need to do is we need to jump into those indicators in our CSS and make those images visible. Now as always when you're editing something for Bootstrap, you need to jump into your code and figure out what exactly you need to override. We're overriding these four indicators, but what is the CSS rule that we need to override in order to make that happen? So we can right-click on any of these indicators and inspect them to try to get an idea of what's setting the width and height for those indicators. And let's bring this a little bit and make sure that once you jail into the elements here that you've got the list items Because that's probably where we need to be looking and sure enough over here on the right under the carousel indicators rule, under the list items within those carousel indicators, that's where we see this width and height being set. So the width is set to 30 pixels, and the height is set to 3 pixels. And you'll see that it is changing and jumping around. Because every time it moves to a new slide, it's toggling this active class. So what we need to do is we need to point to this particular rule here in order to override those within height settings. So I'm gonna highlight if I can, it's not really letting me. All right, we might just have to type this out ourselves. Yeah, okay, I give up. So we're creating a rule for .carousel-indicators. And then we're looking at the list items inside those carousel indicators. And so if we expand this out, and let's bring this down a little bit, we can see these list items here inside this ordered list called carousel indicators. And so it's these list items that we're targeting here. And, again, whenever you're trying to override rules like this, you need to make sure that your rule is at least as specific as the rule that you're overriding. And we're using the exact same rule name here. So as long as our CSS is loaded after the bootstrap CSS, it should override everything just fine. So for these list items inside the carousel indicators class, I want to make the width and height a little bit bigger. So we are gonna set the width here to a value of 75px, and I'm gonna set the height to a value of 50px. So when we do that, we can see that our indicators are now larger. And now we can click in a larger area to move these back and forth. But what we're doing here is we're gonna put images inside them. Now there are images inside our HTML, but they're still not showing up inside our indicators and we need to figure out why. So we're gonna jump into our rule even further just to take a look. And one thing you'll notice inside this carousel indicator's li rule, if you go down towards the bottom, and this is something your not gonna notice unless you're looking really closely at the CSS that you're trying to override. But you'll see that it has a text-indent of -999px. That means any content that's inside those list items is gonna be shoved over to the left 999 pixels, so you won't be able to see it. So if we turn that rule off, I'm gonna uncheck that text indent and then look at the page again. Now we can actually see the images inside those indicators. So now we can style those up a little bit and make them look better. So in order to get them where they are, we obviously can't expect the users to jump into their browser and turn off certain CSS rules. So we do need to override that. So I'm gonna create a text-indent rule or text-indent property here for our rule. And I'm just gonna set that to 0, and that should give us the same effect. Also when I hover over those, I wanna see a pointer cursor, so I'm gonna set the cursor to pointer. So the next thing I want to do is I want these images to stand out a little bit more. So I'm gonna put a border around them. And so we need to point to the images themselves, so I'm gonna highlight this rule. Skip a couple of lines at the bottom and paste it, and I'm gonna point to the images inside those list items. So here I'm gonna set a border and I'm gonna set it to 2px solid, and we'll give it a light gray color of eee. And there we go. That already looks better. We can see those images standing out a little bit better. And then I'm also gonna put a box shadow behind it. I usually try to stay away from box shadows but every now and then they have their use. So I'm gonna set it to an rgba value of 0,0,0 and then 0.8. And that'll put a nice little shadow behind it. And then I'm going to bring down the opacity of those items so that they're semi-transparent. We'll set that to a value of .6 and there we go. Now we can kind of see through those images a little bit. So now what I wanna do is whichever slide is currently active, I want that thumbnail to be fully opaque. I wanna be able to see that thumbnail a little bit better than the others. And as we can see down here in our HTML, if we're looking in our Chrome developer tools here, if I can find how to expand that up. If we look at this indicators, we can see that as we advance from one slide to the next that the corresponding thumbnail is getting a class of active applied to it. So if we point to that active class for these list items, then we can set the opacity for that active class back to one. So let's expand this or bring this back down. And we're gonna create another rule identical to this one. So I'm gonna copy that. Skip a couple of lines and paste it. And that active class is being added to the list items, not to the images, but the list items. So I'm gonna point to img. And for those images that are inside an active list item, we're gonna set the opacity to a value of 1. So when that refreshes, we can see that the active thumbnail Is now opaque while the other thumbnails are all semi-transparent. That looks really nice. And so the last thing I wanna do is I wanna pull these down so that they're not hovering all the way over images but maybe hovering about halfway down or hanging about halfway off of the bottom edge. So I'm gonna point to the carousel-indicators class by itself and I'm gonna move all of the indicators down. So there is the carousel indicators, which is that ordered list that contains all of these items. And again, we can go in here and inspect them to figure out how they're being placed, which is probably what we should have done first. And if we go to this ordered list here and take a look at our carousel indicators rule, we can see that it has a position of absolute, a right and left value of 0. But the bottom value is set to a value of 10. So if we want to experiment with this, we can, let's go down a little bit. We can click on this 10px, and then using our mouse scroll wheel while we hover over it, you'll notice we can change that value. And so I'm gonna bring that down until we get it down to where I think it looks good. And that -40 pixels looks good. So let's do that. I'm gonna hit escape. And then for our .carousel-indicators class here, I'm simply gonna set the bottom value to -40px and there we go. So now let's close that so that we can see our slideshow, and there we go. So now our active image is a little more opaque than the rest. And our thumbnails are down here at the bottom where they're not quite as much in the way as they were before. So that's just one way that you can customize your Bootstrap carousel in order to make it a little bit more interesting and a little bit more unique. Thank you for watching and I'll see you in the next lesson.

Back to the top