Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
カルーセル（Carousel） v4.0.0設定変更v4.2.1追加
カルーセルのような要素の画像やスライドを循環させるためのスライドショーコンポーネント。
使い方（How it works）
カルーセルは、一連のコンテンツを循環するためのスライドショーで、CSS 3D変換とJavaScriptのビットで構築されている。一連のイメージ、テキスト、カスタムマークアップで動作。また、前後のコントロールとインジケータのサポートも組み込まれている。
Page Visibility APIがサポートされているブラウザでは、ブラウザのタブが非アクティブな場合、ブラウザのウィンドウが最小化されている場合など、ウェブページがユーザーに表示されていない場合は循環しない。
prefers-reduced-motion メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするを参照。
入れ子になったカルーセルはサポートされておらず、カルーセルは一般にアクセシビリティ基準に準拠していないことに注意すること。
最後に、ソースファイルからJavaScriptを構築する場合は、util.js が必要。
カルーセルの設定（Examples）v4.0.0一部変更
カルーセルは自動的にスライド寸法を正規化しない。従って、適切なサイズのコンテンツを作成するには、追加のユーティリティやカスタムスタイルを使用する必要がある。カルーセルは前/次のコントロールとインジケータをサポートしているが、明示的に必要とされているわけではない。自分で適切と思うように追加してカスタマイズするように。
.active クラスを必ずスライドの1つに追加すること。そうしないと、カルーセルは表示されない。また、特に1つのページで複数のカルーセルを使用する場合は、オプションのコントロールの .carousel に一意のIDを設定すること。コントロール要素とインジケータ要素には、.carousel 要素のIDと一致する data-target属性（リンクの場合はhref）が必要。
スライドのみ（Slides only）
ここではスライドのみのカルーセルを表示。ブラウザのデフォルトのイメージの配置を防ぐために、カルーセルのイメージ上に.d-blockと.w-100が存在することに注意すること。
見本
Bootstrap3.xの設定例 赤背景が変更箇所
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="第1スライド">
</div><!-- /.item -->
<div class="item">
<img src="..." alt="第2スライド">
</div><!-- /.item -->
<div class="item">
<img src="..." alt="第3スライド">
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
</div><!-- /.carousel -->Bootstrap4.xの設定例 緑背景が変更箇所
<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="第1スライド">
</div><!-- /.carousel-item -->
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="第2スライド">
</div><!-- /.carousel-item -->
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="第3スライド">
</div><!-- /.carousel-item -->
</div><!-- /.carousel-inner -->
</div><!-- /.carousel -->【設定】
div#ID.carousel.slide>div.carousel-inner>div.carousel-item>img.d-block.w-100div.carousel-itemに.activeを入れるとそのアイテムが最初に表示される（div.carousel-item.activeは必ずどれかに設定すること）.carouselにdata-ride="carousel"を入れると読み込み時から循環が開始
【変更履歴】
- 【v4.0.0】
.carousel-innerに、role="listbox"属性の設定は不要に.item⇒.carousel-itemに名称変更<img>に.d-block.w-100を入れる
コントロール付き（With controls）v4.6.1設定変更
前と次のコントロールを追加。<button> 要素を使用することを推奨するが、<a> 要素と role="button" の一緒の使用も可。
見本
Bootstrap3.xの設定例 赤背景が変更箇所
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner" role="listbox">
...
</div><!-- /.carousel-inner -->
<!-- スライドコントロールの設定 -->
<a class="left carousel-control" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">次へ</span>
</a>
</div><!-- /.carousel -->Bootstrap4.xの設定例 緑背景が変更箇所
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner">
...
</div><!-- /.carousel-inner -->
<!-- スライドコントロールの設定 -->
<button type="button" class="carousel-control-prev" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前へ</span>
</button>
<button type="button" class="carousel-control-next" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次へ</span>
</button>
</div><!-- /.carousel -->【設定】
div#ID.carousel.slide> [div.carousel-inner・・・]《スライド画像》 + {[a.carousel-control-prev[href="#ID"][data-slide="prev"]>span.carousel-control-prev-icon]（前へ） + [a.carousel-control-next[href="#ID"][data-slide="next"]>span.icon-next]（次へ）}《スライドコントロール》
【アクセシビリティの設定】
a.carousel-control-{prev|next}（2ヶ所）に、role="button"属性（支援技術にボタンの役割を伝える）span.carousel-control-{prev|next}-icon（2ヶ所）に 、aria-hidden="true"属性（スクリーンリーダー等での読み上げをスキップさせる）- 「前へ」と「次へ」を意味する
span.sr-only（スクリーンリーダー等での読み上げをスキップさせる）
【変更履歴】
- 【v4.0.0】
- スライドコントロール（前へ）：
a.left.carousel-control>span.glyphicon.glyphicon-chevron-left(span.icon-prev) ⇒a.carousel-control-prev>span.carousel-control-prev-icon - スライドコントロール（次へ）：
a.right.carousel-control>span.glyphicon.glyphicon-chevron-right(span.icon-next) ⇒a.carousel-control-next>span.carousel-control-next-icon
- スライドコントロール（前へ）：
- 【4.6.1】
- スライドコントロール：
a.carousel-control-{prev|next}-icon[href="#ID" role="button" data-slide]⇒button.carousel-control-{prev|next}-icon[type="button" data-target="#ID" data-slide]
- スライドコントロール：
インジケータ付き（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">
...
</div><!-- /.carousel-item -->
<div class="carousel-item">
...
</div><!-- /.carousel-item -->
<div class="carousel-item">
...
</div><!-- /.carousel-item -->
</div><!-- /.carousel-inner -->
<!-- スライドコントロールの設定 -->
<button type="button" class="carousel-control-prev" data-target="#carouselExampleIndicators" data-slide="prev">
...
</button>
<button type="button" class="carousel-control-next" data-target="#carouselExampleIndicators" data-slide="next">
...
</button>
</div><!-- /.carousel -->【設定】
div#ID.carousel.slide> {ol.carousel-indicators"> [li.active[data-target="#ID"][data-slide-to="0"]+li[data-target="#ID"][data-slide-to="1"]・・・]}《インジケータ》 + [div.carousel-inner・・・]《スライド画像》 + {[button.carousel-control-prev...] + [button.carousel-control-next...]}《スライドコントロール》liとdiv.carousel-itemの2ヶ所に.activeを入れるとそのアイテムが最初に表示されるdata-slide-to="*"は0から順につける
キャプション付き（With captions）
.carousel-item 内の .carousel-caption 要素を使用して、スライドに簡単にキャプションが追加可能。次に示すようにオプションの表示ユーティリティを使用して、小のビューポートで簡単に非表示が可能。最初は .d-none で非表示にし、.d-md-block で中のビューポート以上で表示に戻す。
見本
Bootstrap3.xの設定例 赤背景が変更箇所
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="第1スライド">
<div class="carousel-caption">
<h3>第1スライド ラベル</h3>
<p>1番目のスライドの代表的なプレースホルダーコンテンツ。</p>
</div><!-- /.carousel-caption -->
</div><!-- /.item -->
...
</div><!-- /.carousel-inner -->Bootstrap4.xの設定例 緑背景が変更箇所
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="第1スライド">
<div class="carousel-caption d-none d-md-block">
<h5>第1スライド ラベル</h5>
<p>1番目のスライドの代表的なプレースホルダーコンテンツ。</p>
</div><!-- /.carousel-caption -->
</div><!-- /.carousel-item -->
...
</div><!-- /.carousel-inner -->【設定】
div.carousel-item> 〔img.d-block.w-100《画像》 + {.carousel-caption.d-none.d-md-block> [<h5>《タイトル》 +<p>《コンテンツ》]}《キャプション》〕《スライドアイテム》
【変更履歴】
- 【v4.0.0】
.carousel-captionに.d-none.d-md-blockを追加（モバイルではキャプションは表示されない設定）- タイトルの見出しの大きさ：
<h3>⇒<h5>
上記の設定を全て合わせると次のようになる：
設定例 緑背景がv4.6.1での変更箇所
<div id="carouselOption1" class="carousel slide" data-ride="carousel">
<!-- インジケータの設定 -->
<ol class="carousel-indicators">
<li data-target="#carouselOption1" data-slide-to="0" class="active"></li>
<li data-target="#carouselOption1" data-slide-to="1"></li>
<li data-target="#carouselOption1" data-slide-to="2"></li>
</ol>
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" data-src="..." alt="第1スライド">
<div class="carousel-caption d-none d-md-block">
<h5>第1スライド ラベル</h5>
<p>1番目のスライドの代表的なプレースホルダーコンテンツ。</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" data-src="..." alt="第2スライド">
<div class="carousel-caption d-none d-md-block">
<h5>第2スライド ラベル</h5>
<p>2番目のスライドの代表的なプレースホルダーコンテンツ。</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" data-src="..." alt="第3スライド">
<div class="carousel-caption d-none d-md-block">
<h5>第3スライド ラベル</h5>
<p>3番目のスライドの代表的なプレースホルダーコンテンツ。</p>
</div>
</div>
</div>
<!-- スライドコントロールの設定 -->
<button type="button" class="carousel-control-prev" data-target="#carouselOption1" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前へ</span>
</button>
<button type="button" class="carousel-control-next" data-target="#carouselOption1" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次へ</span>
</button>
</div>※カルーセルでニュースティッカーを作成する方法をJSサンプル集に記載。
クロスフェード（Crossfade）v4.1.0新設
カルーセルに .carousel-fade を追加すると、スライドではなくフェード遷移でスライドをアニメーション化する。カルーセルのコンテンツ（テキストのみのスライドなど）によっては、適切なクロスフェードを行うために、.carousel-item に .bg-body か任意の background-color CSSを追加することを推奨。
見本
設定例
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." alt="第1スライド" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="..." alt="第2スライド" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="..." alt="第3スライド" class="d-block w-100">
</div>
</div>
<button type="button" class="carousel-control-prev" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前へ</span>
</button>
<button type="button" class="carousel-control-next" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次へ</span>
</button>
</div>【設定】
.carousel.slideに.carousel-fadeを追加
個別の .carousel-item 間隔（Individual .carousel-item interval）v4.2.1新設
.carousel-item に data-interval="" を追加すると、自動的に次のアイテムに循環するまでの時間が変更可能。
見本
設定例
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img class="d-block w-100" data-src="..." alt="第1スライド">
</div>
<div class="carousel-item" data-interval="20000">
<img class="d-block w-100" data-src="..." alt="第2スライド">
</div>
<div class="carousel-item">
<img class="d-block w-100" data-src="..." alt="第3スライト">
</div>
</div>
<button type="button" class="carousel-control-prev" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前へ</span>
</button>
<button type="button" class="carousel-control-next" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次へ</span>
</button>
</div>【設定】
.carousel-itemに[data-interval="数値"]（数値は1000分の1秒単位でデフォルトは5000）を入れる
タッチスワイプを無効にする（Disable touch swiping）v4.6.0新設
カルーセルでは、タッチスクリーンデバイスを左右にスワイプしてスライド間の移動をサポートしている。これは、data-touch 属性を使用すれば無効にできる。以下の見本では data-ride 属性が入っておらず、data-interval="false" があるため、自動再生されない。
見本
設定例
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." alt="..." class="d-block w-100">
</div>
<div class="carousel-item">
<img src="..." alt="..." class="d-block w-100">
</div>
<div class="carousel-item">
<img src="..." alt="..." class="d-block w-100">
</div>
</div>
<button type="button" class="carousel-control-prev" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前へ</span>
</button>
<button type="button" class="carousel-control-next" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次へ</span>
</button>
</div>【設定】
.carousel.slideにdata-touch="false"を入れる
使用方法（Usage）
データ属性経由で（Via data attributes）
データ属性を使用して、カルーセルの位置を簡単に制御。data-slide は、prev や next というキーワードを受け取り、スライドの現在の位置からの相対的な位置が変更される。あるいは、data-slide-to を使用して、スライドの位置を 0 から始まる特定のインデックスにシフトして、カルーセルの未処理のスライドインデックスを data-slide-to="2" に渡す。
data-ride="carousel" 属性は、ページの読み込み時にカルーセルをアニメーションとしてマークするために使用。カルーセルを初期化するために data-ride="carousel" を使わないのなら、自分で初期化しなければならない。同じカルーセルの（余分で不要な）明示的なJavaScriptの初期化と組み合わせて使用することは不可。
JavaScript経由で（Via JavaScript）
手動でカルーセルを呼び出す：
JavaScript$('.carousel').carousel()
オプション（Options）サンプル
オプションは、データの属性やJavaScriptを使用して渡すことが可能。データ属性の場合は、data-interval="" のように、data- にオプション名を追加する。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| interval | number | 5000 | アイテムを自動的に循環させるまでの遅延時間（1000分の1秒単位）。false の場合、カルーセルは自動的に循環しない。 |
| keyboard | boolean | true | カルーセルが、キーボードのイベントに反応すべきかどうか指定true：有効／false：無効 |
| pause v4.0.0一部変更 |
string | boolean | 'hover' |
タッチ対応デバイスでは、 |
| ride v4.0.0追加 |
string | false | ユーザーが最初のアイテムを手動で循環した後にカルーセルを自動再生。'carousel' に設定している場合、読み込み時に自動でカルーセルが再生。 |
| wrap | boolean | true | カルーセルが、連続的に循環するか強制停止するかどうか。true：有効／false：無効 |
| touch v4.2.1追加 |
boolean | true | カルーセルがタッチスクリーンデバイス上で左右のスワイプ相互作用をサポートするかどうか。true：有効／false：無効 |
【変更履歴】
- 【v4.0.0】
pauseのタイプ：null⇒boolean（無効にする場合はnullからfalseの使用に戻る）
メソッド（Methods）サンプル
非同期メソッドと遷移
すべてのAPIメソッドは、非同期で遷移を開始する。それらは移行が始まるとすぐに呼び出し元に戻るが、終了する前に呼び出し元に戻る。さらに、遷移コンポーネントのメソッド呼び出しは無視される。
詳細については、Javascriptのドキュメントに記載。
.carousel(options)
オプションのオプション object を使用してカルーセルを初期化し、アイテムの循環を開始。
JavaScript$('.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') v4.0.0追加
要素のカルーセルを破棄。
.carousel('nextWhenVisible') v4.5.3追加
ページが表示されていない場合やカルーセルやその親要素が表示されていない場合は、カルーセルを次へと循環させない。次のアイテムが表示される前（つまり、slid.bs.carousel イベントが発生する前）に呼び出し元に戻る。
.carousel('to') v4.5.3追加
カルーセルを特定のフレームに循環させる（配列と同様に0から数える）。次のアイテムが表示される前（つまり、slid.bs.carousel イベントが発生する前）に呼び出し元に戻る。
イベント（Events）サンプル
Bootstrapのカルーセルクラスは、カルーセル機能に接続するために2つのイベントを公開する。両方のイベントには、次の追加プロパティがある：
direction：カルーセルのスライドされる方向（"left"か"right"のいずれか）relatedTarget：アクティブなアイテムとして配置されているDOM要素from（v4.0.0追加）：現在のアイテムのインデックスto（v4.0.0追加）：次のアイテムのインデックス
すべてのカルーセルのイベントは、カルーセル自体（すなわち <div class="carousel"> ）で発動。
| イベントタイプ | 説明 |
|---|---|
| slide.bs.carousel | このイベントは、slide のインスタンス・メソッドが呼び出されると直ちに発動。 |
| slid.bs.carousel | このイベントは、カルーセルのスライド遷移が完了すると直ちに発動。 |
使用例
JavaScript$('#myCarousel').on('slide.bs.carousel', function () {
// 何かをする...
})
遷移間隔を変更（Change transition duration）4.1.0新設
.carousel-item の遷移間隔は、コンパイルする前に $carousel-transition Sass変数で変更することも、コンパイル済CSSを使用している場合にカスタムスタイルで変更することも可能。複数の遷移が適用される場合は、transform が最初に定義されていることを確認すること（transition: transform 2s ease, opacity .5s ease-out など）。