カルーセルプラグインは、回転木馬(スライドショー)のように、要素を回転するためのコンポーネントです。
チップ: プラグインは、(ブートストラップの個別の "carousel.js" ファイルを使用して)個々にインクルードするか、 または("bootstrap.js" か "bootstrap.min.js" を使用して)一度にすべてをインクルードすることができます。
注: カルーセルは、Internet Explorer 9 以前では適切に動作しません (スライド効果に、CSS3 のトランジションやアニメーションを使用しているためです)。
次の例は、基本的なカルーセルの作成方法を示しています:
<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">前章へ</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 »
最も外側の <div>:
カルーセルは、カルーセルコントロールが正しく機能するために id (この場合は id="myCarousel"
)
を使用する必要があります。
class="carousel"
は、この <div>
に
カルーセルが含まれていることを指定します。
.slide
クラスは、新しい項目を表示するときに項目をスライドさせる、CSS トランジションやアニメーション効果
を追加します。効果が必要なければ、このクラスを省略します。
data-ride="carousel"
属性は、ページロード直後、ブートストラップにカルーセルのアニメーション
を開始するよう指示します。
"Indicators" の部分:
インジケータとは、各スライドの下にある小さなドットのことです (カルーセルにスライドが幾つあって、現在ユーザがどのスライドを見ているかを示すものです)。
インジケータは、クラス .carousel-indicators
をもつ順序付きリストで指定します。
.data-target
属性は、カルーセルの id をポイントします。
.data-slide-to
属性は、指定したドットがクリックされた時に、どのスライドに移動するかを指定します。
「スライダのラッパー」部分:
スライドは、クラス .carousel-inner
を持つ <div>
内に指定します。
各スライドのコンテンツは、クラス .item
を持つ <div>
内で定義します。
これは、テキストにも画像にもできます。
.active
クラスは、スライドのいずれかに追加する必要があります。そうしないと、カルーセルは表示されません。
"左右のコントロール" 」部分:
このコードは、ユーザが手動でスライド間を行き来することができるように、「右」と「左」ボタンを追加します。
.data-slide
属性は、現在の位置から相対的にスライドの位置を切替えるための、
キーワード "prev"
または "next"
を受取ります。
各スライドのキャプションを作成するために、それぞれの <div class="item">
内に
<div class="carousel-caption">
を追加します:
<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">前章へ</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 カルーセル・リファレンスをご覧ください。