1ページに複数のTwitter Bootstrapカルーセルを置くことは可能ですか？

Twitterのブートストラップバージョン：2.0.31ページに複数のTwitter Bootstrapカルーセルを置くことは可能ですか？

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

例CSS：bootstrap.css

問題： 2用のブートストラップカルーセルは、上で動作しますページでは、基本的に、divコンテナに2つの異なるIDを設定する必要があります（#carousel-1および#carousel-2）。しかし、私はをdivコンテナのIDとして使用しない限り、カルーセルは機能しないことに気付きました。

この場合、1ページに複数のカルーセルを配置するにはどうすればよいですか？

出典

2012-05-09 its_me

カルーセルナビゲーションリンクのhrefを、制御しているカルーセルのID値と一致するように変更します。そのhref値は、ブートストラップがどのスライドをスライドさせるかを決定する方法です。

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

そして第二のカルーセルのために：複数のIDを使用するための

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

出典

2012-05-09 18:16:31 dgabriel

1つのページで複数のカルーセルを実行することができます。必要なのは、適切に呼び出すことだけです。例えば、私は掲示別の質問に書いたこの例を取る：

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

私は、同時に実行されている3つのカルーセル、独自のIDを持つそれぞれを持っています。したがって、各カルーセルが正確にそして#myCarouselのIDとそれらを離れて設定するための番号で始まるIDを持つ

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

：彼らはそうのような属性セレクタを使用して呼び出されます。

しかし、あなたはまた、例えば、同じライン上の各カルーセルのインスタンスを定義することができます。

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

をそして、それは同様に動作しますが、これだけ（各セレクタは、カンマで区切られているかに注目してください。）カルーセルの各インスタンスに対して有効なセレクタを使用していることを確認してください。

出典

2012-05-09 18:16:15

大きなヒントだからあなたは、次を変更する必要があります。 –

グリッドに表示することは可能ですか？お互いの上に積み重ねるのではなく、 – caffeinescript

優れたソリューション、私のために働いた。 – Pupil

1ページに複数のTwitter Bootstrapカルーセルを置くことは可能ですか？

答えて

関連する問題