Posted on by Paul Lyons

Bootstrap Carousel – Two on the Same Page – A Clean Example

[do_widget id=woocommerce_products-3]

See a Complete Example

NOTE: It is so funny really, that this post is viewed more than any other on this site. If you are trying to put two carousels on a page it is simply a problem that you need to understand selectors.
If you need web development or are interested in my web development posts, it has moved to
http://www.paullyons.info/blog.
Paul Lyons
11/1/2014

There is really two ways you can find great new platforms and technologies when building websites. You can tirelessly scrape the web, subscribe to podcasts go to blogs, subscribe to twitter feeds. All of this is but one route. Another is just to get a job in the industry and have to deal with some out-sourced vendor’s code. I tend to be someone who does the later.

And so I found myself dealing with the Twitter Bootstrap world – http://twitter.github.com/bootstrap/ defined as

“Sleek, intuitive, and powerful front-end framework for faster and easier web development.”

At a tidy 25k minified it definitely raised my eyebrows.  So I dove in and took a look around.

I was having a hard time with the project I was working on having two Bootstrap Carousels on the same page.  In the past I had always used a jQuery plugin called BxSlider. So I tried to isolate the problem and still I was stumped. The code was very modular with good name-spacing but the js file just rambled on.  So I looked at how it was instantiated.

What I discovered with bootstrap is that it is best, dare I say “best practice’ to call your jQuery plugin with a selector not used in the plugin. For example, the Carousel plug-in uses .carousel as a class in the code. So doing a

$(document).ready(function(){
$('.carousel').carousel();
});

will just create issues if you put two bootstrap carousels on the same page. The class ‘.carousel’ is used in the bootstrap plugin.  Instead do


$(document).ready(function(){
$(‘#carouselName’).carousel();
});

Where #carouselName’ is of course the id of the carousel.  So I had two of these lovely carousels and could then instantiate them with

$(document).ready(function(){
$('#oceanCarousel, #musiciansCarousel').carousel({
interval: false
});

});

Another issue that I had to deal with is the concept of having more than one img showing at a time. This can be accomplished with simply putting more than one image in the active div

<div class="active item">
<a href="#"><img src="../images/small/ocean01.jpg"></a>
<a href="#"><img src="../images/small/ocean02.jpg"></a>
<a href="#"><img src="../images/small/ocean03.jpg"></a>
</div>

You will not be able to have the carousel move just one image at a time as you can with BxSlider but so be it. A few important notes. It is best to use the entire bootstrap.js even though they have individual versions for each plugin. I think the pure CSS previous and next buttons/arrows that come courtesy of the base bootstrap css are the bomb but of course IE makes them square but then who cares about the people who see the web with IE anyway.

Hope this post makes your day easier.