Creating a Photo Carousel Using Twitter Bootstrap

The last JavaScript effect we’ll review is the Image Carousel, and this is really cool. People love carousel effects, and a photo carousel may be very effective for spotlighting several images on your website with an attention-grabbing effect.

photo carousel twitter bootstrap

Here we have a series of large, landscape-esque photos that are scrolling on by with some text underneath each one. We have little buttons so that we can click to the next image as fast or as slowly as we want. You can also go backwards in the carousel. These carousels are pretty much everywhere on the web these days, and there are plugins and a thousand different ways to code them. Of course, here we’ll learn the Bootstrap way of doing it, which I think renders a really nice effect.

So take a look at your Carousel.html document and you’ll notice that we have some robot photos here. Then there’s some robot-ipsum text that goes underneath each of the images. Then down at the bottom some little left and right arrows, and if we take a look at this in the text editor, you’ll see that all this code is exactly the same.

photo carousels twitter bootstrap

We have some images, we have some headings with little bit of text underneath; and then down at the bottom we have little left and right arrows. Now what we need do is mark this up to make it all work for our carousel. If you’re using different images, be sure to link them up accordingly, changing out the robot image file names with your own.

So first of all, the easiest things to add are some <divs> here which will designate where the captions will appear for our carousel. So just after the first image, but before the <h4>, we’re going to add a <div> with a class of “carousel-caption.” And then, of course, after the last closing paragraph, make sure you close the <div>. We’ll be doing this for all the images.

Do that three times here: <div> with a class of “carousel-caption,” and close out your <div>s.

photo carousel twitter bootstrap

So we’ve marked off where those carousel captions are going to appear, and now we have three units here: the image plus the carousel captioning is all grouping itself. Let’s give each of the three image groupings another <div>. These are <div>s with a class of “item:”

photo carousel twitter bootstrap

You may notice that once again, as with several other sections in this book, we’re not using the grid system here for displaying and containing this carousel. Of course, you could take the code that we’re going to put between the <body> tags, and copy that into one of the columns inside of your grid to display on your site. That’s a very easy thing to do with Bootstrap.

The other thing we want to add here, for the very first item, is that we want to designate this as an “active” item. In other words, we want the carousel to start with the image we want to be first, just as we’ve been doing with our navigation links in previous chapters.

Now we just need to add two more <div>s around the second and third items. Then we’re going to wrap everything that you see here in another <div> with a class of “carousel-inner,” then scroll all the way down to the bottom, and we’re going to close that tag just before the <href> with our arrows down at the bottom of the html page.

Then just above that <div> with a class of “carousel-inner,” as you might expect since that’s called “inner,” is that have an “outer” wrapper as well. So let’s add one final <div> here to wrap it all up nice and tight. This final <div> will be a <div> with a class of “carousel.” And be sure to close that just after the <href>s with the arrows down at the bottom, which are small directional arrows pointing either way.

Finally, in that <div> with the class of “carousel,” also give it a class of “slide.” This will cause the images to have that cool sliding effect from one to the next across the screen. Without the class of “slide,” the images will simply flash onscreen, one after another.

Then give that an id of “robots.”

photo carousel twitter bootstrap

Whew! So that’s the entire markup that we need for the actual content of the carousel. Now we’re going to scroll down to the bottom of the page where we have the links with the left and right arrows, and we’re going to apply some additional classes and information down there.

So, let’s go ahead and apply some styling to the left arrow. We’ll give it a class of “left” as well as “carousel-control.” As you would expect, that’s going to apply the left arrow and cause the carousel to go to the left side of the images, and then do the same for the right arrow. Go ahead and give that the similar classes of “right” and “carousel-control.” You should now have two lines of code like this:

<a href="#" class="left carousel-control">&lsaquo;</a>
<a href="#" class="right carousel-control">&rsaquo;</a>

Also, rather than just the <href> with a pound sign (#) in that line referencing nothing, we’re going to give this an <href> of “#robots.” Just as we’ve seen before, the id above needs to match the <href> so that the JavaScript can work correctly.

And last but not least is the action that we want to have on this <href>, and in this case that’s going to be “data-slide,” with “prev”(not the entire word “previous”) for the first one, and then data-slide=”next” for the last one.

Now you should have some code towards the bottom that looks like this:

<a href="#robots" class=”left carousel-control” dataslide=”prev”>&lsaquo;</a>
<a href="#robots" class=”right carousel-control” dataslide=”next”>&rsaquo;</a>

Alright! So now that we have all the information we can fit packed into these <a> tags down at the bottom of the screen, we’re ready to save our document. You know the drill by now: Ctrl+S or Command+S to save the document, and then go on over to your browser and refresh your page, and you should see a fully-formatted carousel. Rock on!

As to be expected, the carousel stretches all the way across the page again in this instance, and that’s because, the containing element for this particular page is the <body> tag.

We don’t have Bootstrap’s scaffolding in place to make this carousel smaller or larger. If you click your arrows, you can see that the images slide on in and out just as we wanted. Very cool.

And we have the text underneath, describing each one of our images as well.

photo carousel twitter bootstrap

So the image carousel is a great way to showcase images on your website, add a little flair and interactivity, and they’re very fun and engaging for the user. You can get pretty creative with carousels, using text and a variety of effects to differentiate your website.

Comments are closed, but trackbacks and pingbacks are open.