Menu
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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</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?
855
To insert multiple jQuery carousels to the same webpage, you need to create each carousel with a unique ID. In Amazing Carousel, Publish dialog, select the option Publish to Folder, then click Browse to select a folder to save the generated files. You need to set up a unique Carousel ID for each carousel.
I read on the web that the images for the web, in the bootstrap carousel (or any slideshow) should be no longer than 960 px width.
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">‹</a> <a class="carousel-control right" href="#carousel-1" data-slide="next">›</a> And for the second carousel:
<a class="carousel-control left" href="#carousel-2" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel-2" data-slide="next">›</a> 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.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
