JSカルーセル(carousel.js)
カルーセルプラグインは、カルーセル（スライドショー）のように、要素を巡回するためのコンポーネントです。
カルーセルについてのチュートリアルでは、私たちの読みBootstrapカルーセルチュートリアル 。
注：（彼らはスライド効果を達成するためにCSS3のトランジションやアニメーションを使用しているため）のカルーセルは、以前のInternet Explorer 9で正しくサポートされていません。
カルーセルプラグインクラス
| クラス | 説明 |
|---|---|
| .carousel | カルーセルを作成します。 |
| .slide | 一つのアイテムから次へとスライドするときに、CSSのトランジションとアニメーション効果を追加します。 あなたはこの効果をしない場合は、このクラスを削除します |
| .carousel-indicators | カルーセルするための指標を追加します。 これらは、各スライドの下部にある小さなドットである（カルーセルにありますどのように多くのスライドを示し、これは、ユーザーが現在表示しているスライドさせます） |
| .carousel-inner | カルーセルにスライドを追加します。 |
| .item | 各スライドの内容を指定します。 |
| .left carousel-control | ユーザーがスライド間戻ってすることを可能にするカルーセルに左ボタンを、追加します |
| .right carousel-control | ユーザーがスライド間前進することを可能にするカルーセルに右ボタンを追加します。 |
| .carousel-caption | カルーセルのキャプションを指定します。 |
ヴィアdata-*属性
data-ride="carousel"属性は、カルーセルを活性化させます。
data-slideおよびdata-slide-toに行くためにスライドする属性を指定します。
data-slideしながら、 前へまたは次の ：属性には、2つの値を受け入れるdata-slide-to番号を受け入れます。
例
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
»それを自分で試してみてください JavaScriptを介して、
手動で有効にします。
例
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
»それを自分で試してみてください カルーセルオプション
オプションは、データ属性またはJavaScriptを介して渡すことができます。 データ属性の場合、データ間隔= ""のように、データーにオプション名を追加します。
| 名 | タイプ | デフォルト | 説明 | それを試してみてください |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | 各スライド間の遅延（ミリ秒）を指定します。 注意：falseに設定された間隔を自動的にスライドするからアイテムを停止します | JSを使用した データを使用して、 |
| pause | string, or the boolean false | "hover" | マウスポインタがカルーセルに入り、マウスポインタがカルーセルを離れるとスライドを再開するときに、次のスライドを通過するからカルーセルを一時停止します 注：ホバーで一時停止する機能を停止するにはfalseに設定して一時停止 | JSを使用した データを使用して、 |
| wrap | boolean | true | カルーセルは、継続的にすべてのスライドを通過し、または最後のスライドで停止するかどうかを指定します
| JSを使用した データを使用して、 |
カルーセル方法
次の表は、使用可能なすべてのカルーセルメソッドを示します。
| 方法 | 説明 | それを試してみてください |
|---|---|---|
| .carousel( options ) | オプションでカルーセルをアクティブにします。 有効な値については、上記のオプションを参照してください。 | それを試してみてください |
| .carousel("cycle") | 左から右へとカルーセルのアイテムを通過 | それを試してみてください |
| .carousel("pause") | アイテムを通過するからカルーセルを停止します。 | それを試してみてください |
| .carousel(number) | 指定された項目に移動します（ゼロベース：最初の項目が0で、2番目の項目など、1です..） | それを試してみてください |
| .carousel("prev") | 前の項目に移動します | それを試してみてください |
| .carousel("next") | 次の項目に移動します | それを試してみてください |
カルーセルイベント
次の表は、使用可能なすべてのカルーセルイベントを示します。
| イベント | 説明 | それを試してみてください |
|---|---|---|
| slide.bs.carousel | カルーセルを別のアイテムからスライドさせてしようとするときに発生します | それを試してみてください |
| slid.bs.carousel | カルーセルを別のアイテムからスライドを終了したときに発生します。 | それを試してみてください |
例
スライドにキャプション
追加<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>
»それを自分で試してみてください