Join Jen Kramer for an in-depth discussion in this video Adding and styling a carousel position indicator, part of Bootstrap 3: Adding Interactivity to Your Site.
- View Offline
So, we have been working on the styling of this carousel, and we've been adding functionality to it. So far, we've added these left and right navigation arrows, and we've added some captions to some of the selected slides. One of the things that we don't have on these slides yet, though, is a styling indicator. So, where in the series of slides are we? Usually, these are portrayed by a series of little circles, maybe indicating where you are in the series of slides. And so, obviously, you don't have to have this in order to run your carousel, but if you'd like to add it, I'm going to show you how to do that right now.
So, if you hop on in to your index.html file, I'm going to go ahead and put this up at the top of the carousel. So, where we're going to put in our indicators for our carousel is right here, at line 45, so just after the line of code here with the div with the id of locations. And, this is going to be coded as an ordered list. Why ordered? Because, of course, the order matters. So, this will be an OL with a class of carousel-indicators.
So, as you start to see here, if you change this ID to something other than locations, you have many, many places in this code to go through and change because we're pointing to it quite a bit. The other data hyphen attribute we're going to add is a data-slide-to indicator. So, this is, when we're on this particular indicator, what slide are we looking at? So, obviously, I'm up here, and I'm just about to take a look at slide number one. So, the number I want to put in here is one, right? Wrong! Because, we're going to count like engineers.
Normal people count like one, two, three, four, five. How do engineers count? They start with zero. Zero, one, two, three, four, five. So, this is going to be a data-slide-to of zero. And then, we're going to also include here, just on this one particular indicator, a class of active because, of course, we've started with image number one here, and that was flagged as active here, in line 50. And so, the very first carousel indicator should also be flagged with the active class.
If you happen to, say, flag image number five, down here, as the starting image with the class of active, then your data-slide-to would be what? Number four, and that one would have the class of active. Okay, so, we're going to go ahead and then close this LI. And, I'm just going to copy this LI onto the second line. The data-slide-to, in this case, now, it is one. And, we don't need this class of active because, of course, we have that in the previous LI.
Now I'm going to copy this and paste this a bunch of times. And, we can go through and change these numbers. So, zero, one, two, three, four, five, six, and seven. Okay. So, go ahead and save that page. And, let's go on ahead and refresh our web browser. And, now you'll see, there's the carousel indicator, right here. It doesn't show up as well here on the Hong Kong slide, but if we go to some of the other slides, let's say, the London phone booths here, you can see that indicator working away.
These are clickable, so we could skip around as much as we want, wherever we want. And, of course, the position of these indicators is in the CSS if you want to move them, but once again, keep in mind that as you change the size of your screen, this is another element of the page that's going to move around. And, you'll definitely need to take that into account at smaller screen resolutions.
Need help getting Bootstrap up and running? Check out Bootstrap 3 Essential Training.
- Installing Bootstrap 3, Sublime Text 2, and jQuery
- Planning the thumbnail gallery
- Creating modal windows
- Creating an image carousel
- Linking images and adding captions
- Changing the carousel rotation
- Laying out and styling a contact form