カルーセル・プラグインは、回転木馬（スライドショー）のように、要素を巡回させるためのコンポーネントです。

カルーセルプラグイン・クラス

data-* 属性を介して

クラス	説明
.carousel	カルーセルを作成する
.slide	ある項目から次へスライドするときに、CSS トランジションとアニメーション効果を追加する。この効果が不要なときは、このクラスを削除する
.carousel-indicators	カルーセルにインジケータを追加する。これは、各スライドの下にある小さなドットのことで、カルーセルにスライドが幾つあり、ユーザが現在どのスライドを見ているかを示すものです。
.carousel-inner	カルーセルにスライドを追加する
.item	各スライドのコンテンツを指定する
.left carousel-control	ユーザがスライドの間で戻れるようにカルーセルに左ボタンを追加する
.right carousel-control	ユーザがスライドの間で進めるようにカルーセルに右ボタンを追加する
.carousel-caption	カルーセルのキャプションを指定する

data-ride="carousel" 属性は、カルーセルをアクティブにします。

data-slide と data-slide-to 属性は、スライドがどこに行くかを指定します。

data-slide-to は数値を受取る一方、data-slide 属性は、 prev または next の 2 つの値を受取ります。

JavaScript を介して

カルーセル・オプション

オプションは、data 属性または JavaScript を介して渡すことができます。data 属性の場合は、data-interval="" のように、 data- の後にオプション名を追加します。

カルーセル・メソッド

次の表は、使用できる全カルーセル・メソッドの一覧です。

カルーセル・イベント

次の表は、使用できる全カルーセル・イベントの一覧です。

スライドのにキャプション

名前	タイプ	デフォルト	説明	Try it
interval	数値、またはブール値の false	5000	各スライド間の遅延時間（ミリ秒）を指定する。注: 項目の自動スライドを停止するには、interval に false を設定する	Using JS Using data
pause	文字列、またはブール値の false	"hover"	マウスポインタがカルーセルに入った時、次のスライドに移動しようとするカルーセルを一時停止し、マウスポインタがカルーセルを離れるときにスライドを再開する注: ホバー時の一時停止機能を停止するには、pause に false を設定する	Using JS Using data
wrap	ブール値	true	カルーセルは、連続的にすべてのスライドを通しで表示するのか、または最後のスライドで停止するのかどうかを指定する true - 連続的に回転する false - 最後の項目で停止する	Using JS Using data

メソッド	説明	Try it
.carousel(options)	オプション付きでカルーセルをアクティブにする。有効な値については、上記のオプションを参照/td>	Try it
.carousel("cycle")	カルーセルの項目は左から右へ通過する	Try it
.carousel("pause")	項目が通過しようとするカルーセルを停止する	Try it
.carousel(number)	指定した項目に移動する（ゼロベース：最初の項目が 0、2番目の項目が 1など..）	Try it
.carousel("prev")	前の項目に移動する	Try it
.carousel("next")	次の項目に移動する	Try it

イベント	説明	Try it
slide.bs.carousel	カルーセルが、ある項目から他の項目にスライドしようとしているときに発生する	Try it
slid.bs.carousel	カルーセルが、ある項目から他の項目へのスライドが終ったときに発生する	Try it

それぞれのスライドにキャプションを作成するために、各 <div class="item"> 内に <div class="carousel-caption"> を追加します：

例

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>


<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
</div>


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">前章へ</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

Try it Yourself »

Bootstrap JS カルーセル

JS カルーセル (carousel.js)