29

Twitterブートストラップバージョン： 2.0.3

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">…&lt;/div>
    <div class="item">…&lt;/div>
    <div class="item">…&lt;/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">…&lt;/div>
    <div class="item">…&lt;/div>
    <div class="item">…&lt;/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つのブートストラップカルーセルを1つのページで機能させるには、基本的に、それらのdivコンテナー（#carousel-1および#carousel-2）に2つの異なるIDを設定する必要があります。#myCarouselしかし、divコンテナのIDとして使用しない限り、カルーセルが機能しないことに気づきました。

その場合、1つのページに複数のカルーセルを含めるにはどうすればよいですか？

4

2 に答える 2

69

カルーセルナビゲーションリンクの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>

そして2番目のカルーセルの場合：

<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-09T18:16:31.973 に答える
16

1ページで複数のカルーセルを実行することができます。必要なのはそれらを適切に呼び出すことだけです。たとえば、私が投稿した別の質問に書いたこの例を見てください。

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

3つのカルーセルが同時に実行されており、それぞれに固有のIDがあります。これらは、次のような属性セレクターを使用して呼び出されています。

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

#myCarouselしたがって、各カルーセルには、のIDで始まり、次にそれらを区別するための番号で始まるIDがあります。

ただし、同じ行に各カルーセルのインスタンスを定義することもできます。たとえば、次のようになります（各セレクターがコンマで区切られていることに注意してください）。

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

また、これも機能するため、カルーセルのインスタンスごとに有効なセレクターを使用していることを確認してください。

于 2012-05-09T18:16:15.693 に答える