web-dev-qa-db-fra.com

Est-il possible d'avoir plusieurs carrousels Twitter Bootstrap sur une seule page?

Twitter Bootstrap Version: 2.0.3

Exemple de code HTML: 

<!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>

Exemple CSS: bootstrap.css

Problème: Pour que deux carrousels bootstrap fonctionnent sur une page, en gros, je dois définir deux ID différents pour leur conteneurs div (#carousel-1 et #carousel-2). Mais j'ai remarqué que les carrousels ne fonctionnent que si j'utilise #myCarousel comme ID du conteneur div.

Dans ce cas, comment puis-je avoir plusieurs carrousels sur une seule page?

javascripthtmltwitter-bootstrap
26
its_me

Modifiez le href dans les liens de navigation de votre carrousel pour qu'il corresponde à la valeur id du carrousel que vous contrôlez. Cette valeur href est la façon dont bootstrap détermine lequel glisser. Vous devrez donc modifier ce qui suit:

<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>

Et pour le deuxième carrousel:

<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>
66
dgabriel

Vous pouvez avoir plusieurs carrousels sur une seule page, il vous suffit de les appeler de manière appropriée. Par exemple, prenez cet exemple que j'ai écrit sur une autre question que j'ai publiée:

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

J'ai trois carrousels en cours d'exécution en même temps, chacun avec sa propre pièce d'identité unique. Ils sont appelés à l'aide d'un sélecteur d'attribut comme ceci:

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

Ainsi, chaque carrousel a un identifiant qui commence exactement par l'ID de #myCarousel puis un nombre pour les différencier.

Mais vous pouvez également définir une instance pour chaque carrousel sur la même ligne, par exemple: (Remarquez comment chaque sélecteur est séparé par une virgule.)

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

Et cela fonctionnera également, alors assurez-vous simplement d'utiliser un sélecteur valide pour chaque instance de vos carrousels.

16
Andres Ilich