メインコンテンツへスキップ

カルーセル（Carousel） v5.0.0-beta1設定変更

カルーセルのような要素の画像やスライドを循環させるためのスライドショーコンポーネント。

目次

使い方（How it works）

カルーセルは、一連のコンテンツを循環するためのスライドショーで、CSS 3D変換とJavaScriptのビットで構築されている。一連のイメージ、テキスト、カスタムマークアップで動作。また、前後のコントロールとインジケータのサポートも組み込まれている。

Page Visibility APIがサポートされているブラウザでは、ブラウザのタブが非アクティブな場合、ブラウザのウィンドウが最小化されている場合など、ウェブページがユーザーに表示されていない場合は循環しない。

入れ子になったカルーセルはサポートされておらず、カルーセルは一般にアクセシビリティ基準に準拠していないことに注意すること。

 

カルーセルの設定（Examples）v5.0.0-beta1設定変更

カルーセルは自動的にスライド寸法を正規化しない。従って、適切なサイズのコンテンツを作成するには、追加のユーティリティやカスタムスタイルを使用する必要がある。カルーセルは前/次のコントロールとインジケータをサポートしているが、明示的に必要とされているわけではない。自分で適切と思うように追加してカスタマイズするように。

.active クラスを必ずスライドの1つに追加すること。そうしないと、カルーセルは表示されない。また、特に1つのページで複数のカルーセルを使用する場合は、オプションのコントロールの .carousel に一意の id を設定すること。コントロール要素とインジケータ要素には、.carousel 要素の id と一致する data-bs-target 属性（リンクの場合は href）が必要。

スライドのみ（Slides only）

ここではスライドのみのカルーセルを表示。ブラウザのデフォルトのイメージの配置を防ぐために、カルーセルのイメージ上に .d-block と .w-100 が存在するので注意。

見本
Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
	<!-- スライドさせる画像の設定 -->
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="..." class="d-block w-100" alt="第1スライド">
		</div><!-- /.carousel-item -->
		<div class="carousel-item">
			<img src="..." class="d-block w-100" alt="第2スライド">
		</div><!-- /.carousel-item -->
		<div class="carousel-item">
			<img src="..." class="d-block w-100" alt="第3スライド">
		</div><!-- /.carousel-item -->
	</div><!-- /.carousel-inner -->
</div><!-- /.carousel -->
【設定】
  • div#ID.carousel.slide > div.carousel-inner > div.carousel-item > img.d-block.w-100
  • div.carousel-item に .active を入れるとそのアイテムが最初に表示される（div.carousel-item.active は必ずどれかに設定すること）
  • .carousel に data-bs-ride="carousel" を入れると読み込み時から循環が開始
【変更履歴】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-ride="carousel"] ⇒ [data-bs-ride="carousel"]

コントロール付き（With controls）v5.0.0-beta2設定変更

前と次のコントロールを追加。<button> 要素を使用することを推奨するが、<a> 要素と role="button" の一緒の使用も可。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
	<!-- スライドさせる画像の設定 -->
	<div class="carousel-inner">
		...
	</div><!-- /.carousel-inner -->
	<!-- スライドコントロールの設定 -->
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="visually-hidden">前へ</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">次へ</span>
	</button>
</div><!-- /.carousel -->
※Bootstrap4.xの設定例 赤背景が変更箇所
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
		...
	</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">前へ</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">次へ</span>
	</a>
</div>
【設定】
  • div#ID.carousel.slide > [div.carousel-inner・・・]《スライド画像》 + {[button.carousel-control-prev[data-bs-target="#ID"][data-bs-slide="prev"] > span.carousel-control-prev-icon]（前へ） + [button.carousel-control-next[data-bs-target="#ID"][data-bs-slide="next"] > span.icon-next]（次へ）}《スライドコントロール》
【アクセシビリティの設定】
  • button.carousel-control-{prev|next}（2ヶ所）に、
    • span.carousel-control-{prev|next}-icon（2ヶ所）に 、aria-hidden="true" 属性（スクリーンリーダー等での読み上げをスキップさせる）
    • 「前へ」と「次へ」を意味する span.visually-hidden（スクリーンリーダー等での読み上げをスキップさせる）
    をそれぞれ入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • span.sr-only ⇒ span.visually-hidden
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-ride="carousel"] ⇒ [data-bs-ride="carousel"]
      • [data-slide="prev"] ⇒ [data-bs-slide="prev"]
      • [data-slide="next"] ⇒ [data-bs-slide="next"]
  • 【v5.0.0-beta2】
    • スライドコントロール：a.carousel-control-{prev|next}-icon[href="#ID" role="button" data-bs-slide] ⇒ button.carousel-control-{prev|next}-icon[type="button" data-bs-target="#ID" data-bs-slide]

インジケータ付き（With indicators）v5.0.0-beta2設定変更

インジケータは、コントロールと並んでカルーセルに追加可能。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
	<!-- インジケータの設定 -->
	<div class="carousel-indicators">
		<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="スライド 1"></button>
		<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="スライド 2"></button>
		<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="スライド 3"></button>
	</div>
	<!-- スライドさせる画像の設定 -->
	<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 class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
		...
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
		...
	</button>
</div><!-- /.carousel -->
※Bootstrap4.xの設定例 赤背景が変更箇所
<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 -->
  <!-- スライドコントロールの設定 -->
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    ...
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    ...
  </a>
</div><!-- /.carousel -->
【設定】
  • div#ID.carousel.slide > {div.carousel-indicators" > [button[data-bs-target="#ID"][data-bs-slide-to="*"] ...]}《インジケータ》 + [div.carousel-inner ...]《スライド画像》 + {[button.carousel-control-prev ...] + [button.carousel-control-next ...]}《スライドコントロール》
  • <button> と div.carousel-item の2ヶ所に .active を入れるとそのアイテムが最初に表示される
  • data-bs-slide-to="*" は 0 から順につける
【アクセシビリティの設定】
  • button.active と同じ要素に aria-current="true"（支援技術に現在のアイテムであることを伝える）を入れる
  • インジケータとなる <button> に、aria-label 属性（インジケータボタンのラベリング）を入れる
【変更履歴】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-ride="carousel"] ⇒ [data-bs-ride="carousel"]
      • [data-slide-to="*"] ⇒ [data-bs-slide-to="*"]
      • [data-slide="prev"] ⇒ [data-bs-slide="prev"]
      • [data-slide="next"] ⇒ [data-bs-slide="next"]
  • 【v5.0.0-beta2】
    • ol.carousel-indicators > <li> ⇒ div.carousel-indicators > <button>
    • アクセシビリティの設定を追加

キャプション付き（With captions）

.carousel-item 内の .carousel-caption 要素を使用して、スライドに簡単にキャプションが追加可能。以下に示すようにオプションの表示ユーティリティを使用して、小のビューポートで簡単に非表示が可能。最初は .d-none で非表示にし、.d-md-block で中のビューポート以上で表示に戻す。

見本
設定例
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner">
	<div class="carousel-item active">
		<img src="..." class="d-block w-100" 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>《コンテンツ》]}《キャプション》〕《スライドアイテム》
【注意】
  • .carousel-caption に .d-none.d-md-block を追加しているので、モバイル（ビューポートが小以下）ではキャプションは表示されない

上記の設定を全て合わせると以下のようになる：

Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselOption1" class="carousel slide" data-bs-ride="carousel">
	<!-- インジケータの設定 -->
	<div class="carousel-indicators">
		<button type="button" data-bs-target="#carouselOption1" data-bs-slide-to="0" class="active" aria-current="true" aria-label="スライド 1"></button>
		<button type="button" data-bs-target="#carouselOption1" data-bs-slide-to="1" aria-label="スライド 2"></button>
		<button type="button" data-bs-target="#carouselOption1" data-bs-slide-to="2" aria-label="スライド 3"></button>
	</div>
	<!-- スライドさせる画像の設定 -->
	<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>
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" 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" src="..." alt="第3スライド">
			<div class="carousel-caption d-none d-md-block">
				<h5>第3スライド ラベル</h5>
				<p>3番目のスライドの代表的なプレースホルダーコンテンツ。</p>
			</div>
		</div>
	</div>
	<!-- スライドコントロールの設定 -->
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselOption1" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="visually-hidden">前へ</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselOption1" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">次へ</span>
	</button>
</div>

クロスフェード（Crossfade）v5.0.0-alpha2設定変更

カルーセルに .carousel-fade を追加すると、スライドではなくフェード遷移でスライドをアニメーション化する。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="..." class="d-block w-100" alt="第1スライド">
		</div>
		<div class="carousel-item">
			<img src="..." class="d-block w-100" alt="第2スライド">
		</div>
		<div class="carousel-item">
			<img src="..." class="d-block w-100" alt="第3スライド">
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="visually-hidden">前へ</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">次へ</span>
	</button>
</div>
【設定】
  • .carousel.slide に .carousel-fade を追加
【変更履歴】
  • 【v5.0.0-alpha2】
    • スライドコントロールの設定変更（span.sr-only ⇒ span.visually-hidden）
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
  • 【v5.0.0-beta2】
    • スライドコントロールの設定変更（a.carousel-control-{prev|next}-icon ⇒ button.carousel-control-{prev|next}-icon）

.carousel-item に data-bs-interval="" を追加すると、自動的に次のアイテムに循環するまでの時間が変更可能。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active" data-bs-interval="10000">
			<img class="d-block w-100" src="..." alt="第1スライド">
		</div>
		<div class="carousel-item" data-bs-interval="20000">
			<img class="d-block w-100" src="..." alt="第2スライド">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="..." alt="第3スライト">
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="visually-hidden">前へ</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">次へ</span>
	</button>
</div>
【設定】
  • .carousel-item に [data-bs-interval="数値"]（数値は1000分の1秒単位でデフォルトは 5000）を入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • スライドコントロールの設定変更（span.sr-only ⇒ span.visually-hidden）
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-interval="数値"] ⇒ [data-bs-interval="数値"]
  • 【v5.0.0-beta2】
    • スライドコントロールの設定変更（a.carousel-control-{prev|next}-icon ⇒ button.carousel-control-{prev|next}-icon）

タッチスワイプを無効にする（Disable touch swiping）v5.0.0-beta2新設（v4.6.0でバックポート）

カルーセルでは、タッチスクリーンデバイスを左右にスワイプしてスライド間の移動をサポートしている。これは、data-bs-touch 属性を使用すれば無効にできる。以下の見本では data-bs-ride 属性が入っておらず、data-bs-interval="false" があるため、自動再生されない。

見本
設定例
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="..." class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
			<img src="..." class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
			<img src="..." class="d-block w-100" alt="...">
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="visually-hidden">前へ</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">次へ</span>
	</buttona>
</div>
【設定】
  • .carousel.slide に data-bs-touch="false" を入れる

 

カルーセルでニュースティッカー ※裏技、v5.0.0-beta1設定変更

横スライド

見本

記事の見出し 1 この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。

記事の見出し 2 この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。

記事の見出し 3 この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。

記事の見出し 4 この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。

記事の見出し 5 この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。

Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所
<div id="carousel-ticker" class="carousel slide bg-info text-dark" data-bs-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<p class="lead text-truncate mb-0 p-3">
				<a href="#" class="text-white">
					<span class="fw-bold">記事の見出し 1</span> この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。
				</a>
			</p>
		</div>
		<div class="carousel-item">
			<p class="lead text-truncate mb-0 p-3">
				<a href="#" class="text-white">
				  <span class="fw-bold">記事の見出し 2</span> この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。
				</a>
			</p>
		</div>
		<div class="carousel-item">
			<p class="lead text-truncate mb-0 p-3">
				<a href="#" class="text-white">
					<span class="fw-bold">記事の見出し 3</span> この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。
				</a>
			</p>
		</div>
		<div class="carousel-item">
			<p class="lead text-truncate mb-0 p-3">
				<a href="#" class="text-white">
					<span class="fw-bold">記事の見出し 4</span> この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。
				</a>
			</p>
		</div>
		<div class="carousel-item">
			<p class="lead text-truncate mb-0 p-3">
				<a href="#" class="text-white">
					<span class="fw-bold">記事の見出し 5</span> この文章はダミーです。文字の大きさ、量、字間、行間等を確認して下さい。
				</a>
			</p>
		</div>
	</div>
</div>

縦スライド

参照元

See the Pen News ticker on Bootstrap5 carousel (vertical slide) by cccabinet (@cccabinet) on CodePen.

【変更履歴】
  • 【v5.0.0-alpha1】
    • 外部CSSの設定からできるだけBootstrapのユーティリティクラスを使用するように変更

 

ダーク・バージョン（Dark variant）v5.0.0-alpha2新設

.carousel-dark を .carousel に追加して、コントロール、インジケーター、キャプションを暗くする。コントロールは、filter CSSプロパティを使用して、デフォルトの白から反転。キャプションとコントロールには、color と background-color をカスタマイズする追加のSass変数あり。

見本
Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
	...
</div>
【設定】
  • .carousel に .carousel-dark を追加

 

使用方法（Usage）

データ属性経由で（Via data attributes）

データ属性を使用して、カルーセルの位置を簡単に制御。data-bs-slide は、prev や next というキーワードを受け取り、スライドの現在の位置からの相対的な位置が変更される。あるいは、data-bs-slide-to を使用して、スライドの位置を 0 から始まる特定のインデックスにシフトして、カルーセルの未処理のスライドインデックスを data-bs-slide-to="2" に渡す。

data-bs-ride="carousel" 属性は、ページの読み込み時にカルーセルをアニメーションとしてマークするために使用。カルーセルを初期化するために data-bs-ride="carousel" を使わないのなら、自分で初期化しなければならない。同じカルーセルの（余分で不要な）明示的なJavaScriptの初期化と組み合わせて使用することは不可。

JavaScript経由で（Via JavaScript）v5.0.0-alpha1設定変更

手動でカルーセルを呼び出す：

Bootstrap5.xの設定例
JavaScriptvar myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
※Bootstrap4.xの設定例
JavaScript$('#myCarousel').carousel()
【変更履歴】
  • 【v5.0.0-alpha1】
    • JavaScriptの設定がjQueryに依存しない方法に変更

オプション（Options）v5.0.0-beta2一部変更

オプションは、データの属性やJavaScriptを使用して渡すことが可能。データ属性の場合は、data-bs-interval="" のように、data-bs- にオプション名を追加する。

名前 タイプ デフォルト 説明
interval number 5000 アイテムを自動的に循環させるまでの遅延時間（1000分の1秒単位）。false の場合、カルーセルは自動的に循環しない。
keyboard boolean true カルーセルが、キーボードのイベントに反応すべきかどうか指定
true：有効／false：無効
pause string | boolean 'hover'

'hover' に設定されている場合は、mouseenter でカルーセルの循環を一時停止し、mouseleave でカルーセルの循環を再開。false に設定した場合、カルーセルの上にカーソルを置いても一時停止しない。

タッチ対応デバイスでは、'hover' に設定すると、循環が自動的に再開する前に、2つの間隔で touchend（ユーザーがカルーセルとのやりとり終了後）で一時停止。これは上記のマウスの動作に加えてある。
ride
v5.0.0-beta2「slide」から再変更		 string | boolean false ユーザーが最初のアイテムを手動で循環した後にカルーセルを自動再生。'carousel' に設定している場合、読み込み時に自動でカルーセルが再生。
wrap boolean true カルーセルが、連続的に循環するか強制停止するかどうか。
true：有効／false：無効
touch boolean true カルーセルがタッチスクリーンデバイス上で左右のスワイプ相互作用をサポートするかどうか。
true：有効／false：無効

【変更履歴】

  • 【v5.0.0-alpha1】
    • ride オプションは slide に名称変更し、タイプに boolean が追加
  • 【v5.0.0-beta2】
    • slide オプションの名称を ride に戻す

メソッド（Methods）v5.0.0-alpha1設定変更、一部変更

例えば、カルーセル・コンストラクタを使用してカルーセル・インスタンスを作成し、追加のオプションで初期化してアイテムの循環を開始することが可能。

Bootstrap5.xの設定例
JavaScriptvar myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
	interval: 2000,
	wrap: false
})
※Bootstrap4.xの設定例
JavaScript$('#myCarousel').carousel({
	interval: 2000,
	wrap: false
})
メソッド 説明
cycle 行頭から行末にカルーセルのアイテムが循環。
pause カルーセルのアイテムの循環を停止。
prev 前のアイテムに循環。前のアイテムが表示される前（つまり、slid.bs.carousel イベントが発生する前）に呼び出し元に戻る。
next 次のアイテムに循環。次のアイテムが表示される前（つまり、slid.bs.carousel イベントが発生する前）に呼び出し元に戻る。
nextWhenVisible
v5.0.0-alpha1追加		 ページが表示されていない場合やカルーセルやその親要素が表示されていない場合は、カルーセルを次へと循環させない。ターゲットアイテムが表示される前に呼び出し元に戻る。
to
v5.0.0-alpha1「number」から変更		 カルーセルを特定のフレームに循環させる（配列と同様に0から数える）。ターゲットアイテムが表示される前（つまり、slid.bs.carousel イベントが発生する前）に呼び出し元に戻る。
dispose 要素のカルーセルを破棄（DOM要素に保存されているデータを削除）。
getInstance
v5.0.0-alpha1追加		 DOM要素に関連付けられたカルーセル・インスタンスを取得することを可能にする静的メソッド。
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().carousel('xxx') ⇒ carousel.xxx()
    • nextWhenVisible, getInstance メソッドが追加
    • number メソッドは、to に名称変更

イベント（Events）

Bootstrapのカルーセルクラスは、カルーセル機能に接続するために2つのイベントを公開する。両方のイベントには、次の追加プロパティがある：

  • direction：カルーセルのスライドされる方向（"left" か "right" のいずれか）
  • relatedTarget：アクティブなアイテムとして配置されているDOM要素
  • from：現在のアイテムのインデックス
  • to：次のアイテムのインデックス

すべてのカルーセルのイベントは、カルーセル自体（すなわち <div class="carousel"> ）で発動。

イベントタイプ 説明
slide.bs.carousel slide のインスタンス・メソッドが呼び出されると直ちに発動。
slid.bs.carousel カルーセルのスライド遷移が完了すると直ちに発動。
使用例 v5.0.0-alpha1設定変更
JavaScriptvar myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
	// 何かをする...
})

遷移間隔を変更（Change transition duration）

.carousel-item の遷移間隔は、コンパイルする前に $carousel-transition-duration Sass変数で変更することも、コンパイル済みCSSを使用している場合にカスタムスタイルで変更することも可能。複数の遷移が適用される場合は、transform が最初に定義されていることを確認すること（例：transition: transform 2s ease, opacity .5s ease-out）。