カルーセルプラグイン
カルーセルプラグインは、カルーセル（スライドショー）のように、要素を巡回するためのコンポーネントです。
ヒント：プラグインは、（使用して、個別に含めることができるBootstrap's個々の"carousel.js"ファイル）、またはすべてを一度に（使用して"bootstrap.js"または"bootstrap.min.js" ）。
カルーセル例
ハニア
ハニアの雰囲気はフィレンツェとヴェネツィアのタッチを持っています。
ハニア
ハニアの雰囲気はフィレンツェとヴェネツィアのタッチを持っています。
フラワーズ
コリンバリ、クレタ島の美しい花。
フラワーズ
コリンバリ、クレタ島の美しい花。
注：（彼らはスライド効果を達成するためにCSS3のトランジションやアニメーションを使用しているため）のカルーセルは、以前のInternet Explorer 9で正しくサポートされていません。
カルーセルを作成する方法
次の例では、基本的なカルーセルを作成する方法を示しています。
例
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<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">Previous</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>
»それを自分で試してみてください 例の説明しました
最も外側<div>
カルーセルは、（この場合のidを使用する必要がid="myCarousel"カルーセル・コントロールが適切に機能するために）。
class="carousel" 、このように指定し<div>カルーセルが含まれています。
.slideクラスは、新しいアイテムを表示するときの項目がスライドさせるCSSトランジションやアニメーション効果を追加します。 あなたはこの効果をしない場合は、このクラスを省略します。
data-ride="carousel"属性は、ページのロード時すぐにカルーセルをアニメーションを開始するためにブートストラップを指示します。
「インジケータ」の部分：
指標は（カルーセルに存在するどのように多くのスライドを示し、ユーザは現在表示しているスライドさせ）、各スライドの下部にある小さなドットです。
指標は、クラスと順序リストで指定されている.carousel-indicators 。
data-target属性は、カルーセルのIDを指します。
data-slide-to特定のドットをクリックすると、に行くためにスライドを指定属性。
「スライドのラッパー"の部分：
スライドはで指定され<div>クラスで.carousel-inner 。
各スライドの内容は、で定義され<div>クラスで.item 。 これは、テキストまたは画像であってもよいです。
.activeクラスは、スライドのいずれかに追加する必要があります。 そうでなければ、カルーセルは表示されません。
「左と右のコントロール」の部分：
このコードは、「左」、ユーザーが手動でスライド間を行き来することを可能にする「権利」ボタンが追加されます。
data-slide属性は、キーワード受け入れる"prev"または"next"を現在の位置からの相対スライド位置を変更し、。
スライドにキャプションを追加します。
追加<div class="carousel-caption">それぞれの中<div class="item">各スライドのキャプションを作成するには：
例
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<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>
<!-- Left and right controls -->
<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">Previous</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>
»それを自分で試してみてください 完了してBootstrapカルーセルリファレンス
すべてのカルーセルオプション、メソッドおよびイベントの完全なリファレンスについては、当社に行くBootstrap JSカルーセルリファレンス 。