Is It Possible To Have Multiple Twitter Bootstrap Carousels On One Page?

Twitter Bootstrap Version: 2.0.3 Example HTML code:

Solution 1:

Change the href in your carousel nav links to match the id value of the carousel you're controlling. That href value is how bootstrap determines which to slide. So you will need to change the following:

<a class="carousel-control left" href="#carousel-1" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">&rsaquo;</a>

And for the second carousel:

<a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a>

Solution 2:

You can have multiple carousels running in one page, all you have to do is call them appropriately. For instance, take this example i wrote on another question i posted:

http://jsfiddle.net/andresilich/S2rnm/

I have three carousels running at the same time, each with their own unique ID. They're being called using an attribute selector like so:

$('[id^="myCarousel"]').carousel();

So each carousel has an id that begins exactly with the ID of #myCarousel and then a number to set them apart.

But you can also define an instance for each carousel on the same line, for example: (Notice how each selector is separated by a comma.)

$('#myCarousel1, #myCarousel2, #differentCarousel3').carousel();

And it will work as well, so just make sure you use a valid selector for each instance of your carousels.

Share