CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
its_me
its_me

Reputation: 11338

Is it possible to have multiple Twitter Bootstrap carousels on one page?

Twitter Bootstrap Version: 2.0.3

Example HTML code:

<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type="text/javascript">
$(document).ready(function() {
    $('.carousel').each(function(){
        $(this).carousel({
            pause: true,
            interval: false
        });
    });
});​
</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
</head>
<body>
<div id="carousel-1" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<div id="carousel-2" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</body>
</html>

Example CSS: bootstrap.css

Problem: For two bootstrap carousels to work on a page, basically, I need to set two different IDs for their div containers (#carousel-1 and #carousel-2). But I've noticed that the carousels do not work unless I use #myCarousel as the ID of the div container.

In that case, how can I have multiple carousels on a single page?

Upvotes: 29

Views: 67101

Answers (2)

dgabriel
dgabriel

Reputation: 2830

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>

Upvotes: 69

Andres I Perez
Andres I Perez

Reputation: 75379

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.

Upvotes: 16

Related Questions