原文:Carousel
カルーゼルのような、要素を循環するためのスライドショー・コンポーネント-テキストの画像やスライド
それは、どのように動作するか
カルーゼルは、一連のコンテンツを循環するためのスライドショーです。CSSの3D変換と少しのJavaScriptで構築されています。それは、一連の画像、テキストやカスタム・マークアップで動作しています。また、それには、前後のコントロールとインジケータのためのサポートが含まれています。
Page Visibility APIがサポートされているブラウザでは、カルーゼルは、スライドすることを避けます。Webページが、ユーザーに表示されないとき、(例えば、ブラウザのタブが非アクティブであるとき、ブラウザ・ウィンドウは最小化されるなど)。
入れ子になったカルーゼルをサポートしてないことに、ご注意ください。そして、カルーゼルは、通常、アクセシビリティ標準に準拠していません。
最後に、あなたが、ソースから、私たちのJavaScriptをビルドしている場合、util.jsを必要とします。
例
カルーゼルは、スライド寸法を自動的に正規化しません。このように、あなたは、コンテンツのサイズを適切に設定するために、追加のユーティリティやカスタムスタイルを使用する必要があるかもしれません。カルーゼルは、前後のコントロールとインジケータをサポートするしていますが、それらは明確に必要としません。あなたが適切と思うように、追加してカスタマイズしてください。
特に、あなたが、一つのページに、複数のカルーゼルを使用している場合、オプションのコントロールのために、.carouselの上で一意のIDを設定する必要があります。
スライドのみ
Slides only
ここには、スライドだけのカルーセルがあります。ブラウザの既定の画像位置合せを防ぐために、カルーゼル画像上の.d-blockと.img-fluidの存在に注意して下さい。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
コントロール付き
前と次のコントロールに追加する:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
インジケータ付き
With indicators
また、あなたは、コントロールと一緒に、カルーゼルにインジケータを追加することができます。
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
最初のアクティブな要素が必要です。
Initial active element required
.activeクラスは、スライドの1つに追加する必要があります。それ以外の場合には、カルーゼルは、表示されません。
キャプション付き
.carousel-item内の.carousel-caption要素を使用して、スライドにキャプションを簡単に追加できます。それらは、。以下に示すように、オプションのディスプレイ・ユーティリティで、小さなビューポートに簡単に隠すことができます。私たちは、まず最初に、.d-noneでそれらを隠して、それらを.d-md-blockで中型のデバイス上に導入します。
<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
使用法:
データ属性を通して
簡単にカルーゼルの位置を制御するために、データ属性を使用しました。data-slideは、その現在の位置を基準として、スライドの位置を変更する、キーワードprevやnextを扱います。他の方法として、スライド位置を、0から始まる特定のインデックスへ移すカルーゼルdata-slide-to="2"に、未処理のスライド・インデックスを渡すために、data-slide-toを使用します。
data-ride="carousel"属性は、ページ読み込み時にアニメーションとして開始する、カルーゼルを指定するために使用されます。それは、同じカルーゼルの(冗長で不必要な)明確なJavaScript初期化と結合して使用できません。
JavaScriptを通して
オプション
オプションは、データ属性やJavaScriptを使用して渡すことができます。データ属性のために、data-interval=""のように、data-にオプションの名前を添付します。
名前 | 型 | 既定 | 説明 |
---|---|---|---|
interval | number | 5000 | 自動サイクルの間で、項目を遅らせる時間。falseの場合、カルーゼルは自動的に循環しません。 |
keyboard | boolean | true | カルーゼルが、キーボード・イベントに反応するかどうかに関係なく、 |
pause | string | boolean | "hover" | "hover"に設定されている場合、mouseenter上で、カルーゼルの循環を一時停止します。そして、mouseleave上で、カルーゼルの循環を再開します。falseに設定される場合、カルーセルの上にマウスを置くと、一時停止しません。 タッチ対応デバイスで、"hover"に設定されたとき、(一旦、ユーザーが、カルーゼルとやり取りすると)2つのインターバルの間、自動的に再開する前に、touchend上で、循環が一時停止します。これが、上記のマウス動作に追加されることに注意してください。 |
ride | string | false | ユーザーが、最初に項目を手作業で循環させたあと、カルーゼルを自動再生します。「カルーゼル」の場合、読み込み時に、カルーゼルを自動再生します。 |
wrap | boolean | true | カルーゼルが、連続的に循環するか、ハードストップを持っているか。 |
メソッド
非同期メソッドと遷移
Asynchronous methods and transitions
すべてのAPIメソッドは、非同期で遷移を開始します。それらは、移行が開始されるとすぐに、終了する前に呼び出し元に戻ります。 さらに、遷移コンポーネントのメソッド呼び出しは無視されます。
.carousel(options)
オプションのオプション・オブジェクトで、カルーゼルを初期化し、項目の循環を開始します。
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
カルーセルの項目を左から右に移動します。
.carousel('pause')
カルーゼルを、項目を循環から停止します。
.carousel(number)
カルーセルを特定のフレームに循環させます(0ベース、配列に似ています)。ターゲット・アイテムが表示される前に、呼び出し元に戻ります。(すなわち、slid.bs.carouselイベントが発生する前に)。
.carousel('prev')
前の項目に循環します。前の項目が表示される前に、呼び出し元に戻ります。(すなわち、slid.bs.carouselイベントが発生する前に)。
.carousel('next')
次の項目に循環します。次の項目が表示される前に、呼び出し元に戻ります。(すなわち、slid.bs.carouselイベントが発生する前に)。
.carousel('dispose')
要素のカルーゼルを無効にします。
Events
Bootstrapのカルーゼル・クラスは、カルーゼル機能にフッキングするための2つのイベントを公開しています。両方のイベントは、次の追加プロパティを持っています。:
- direction: カルーゼルがスライドする方向性("left"や"right"のどちらか)。
- relatedTarget: DOM要素が、アクティブな項目として、その場所で、スライドしています。
- from: 現在の項目のインデックス
- to: 次の項目のインデックス
すべてのカルーゼル・イベントは、カルーゼルそのもの(すなわち<div class="carousel">)で発生します。
Event型 | 解説 |
---|---|
slide.bs.carousel | スライド・インスタンス・メソッドが呼び出されるとき、このイベントは、すぐに発生します。 |
slid.bs.carousel | このイベントが起動されます。カルーセルが、そのスライドの遷移を完了したとき、 |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})