Czy możliwe jest posiadanie wielu karuzel Twitter Bootstrap na jednej stronie?
Wersja Bootstrap Twittera: 2.0.3
Przykładowy kod 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> </code>
Przykład CSS: bootstrap.css
Problem: Aby dwie karuzele ładujące działały na stronie, w zasadzie muszę ustawić dwa różne identyfikatory dla kontenerów div (#carousel-1
i#carousel-2
). Ale zauważyłem, że karuzele nie działają, chyba że użyję#myCarousel
jako identyfikator kontenera div.
W takim przypadku, jak mogę mieć wiele karuzel na jednej stronie?