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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

カルーセル(Carousel) v4.0.0設定変更v4.2.1追加

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

使い方(How it works)

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

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

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

最後に、ソースファイルから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-100
  • div.carousel-item.active を入れるとそのアイテムが最初に表示される(div.carousel-item.active は必ずどれかに設定すること)
  • .carouseldata-ride="carousel" を入れると読み込み時から循環が開始

【Bootstrap3.xとの変更箇所】

  • .carousel-inner に、role="listbox" 属性の設定は不要に
  • .item.carousel-item に名称変更
  • <img>.d-block.w-100 を入れる

コントロール付き(With controls)

前と次のコントロールを追加:

見本
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 -->
	<!-- スライドコントロールの設定 -->
	<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><!-- /.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(スクリーンリーダー等での読み上げをスキップさせる)
    をそれぞれ入れる

【Bootstrap3.xとの変更箇所】

  • スライドコントロール(前へ):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

インジケータ付き(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 -->
	<!-- スライドコントロールの設定 -->
	<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 > {ol.carousel-indicators" > [li.active[data-target="#ID"][data-slide-to="0"] + li[data-target="#ID"][data-slide-to="1"]・・・]}《インジケータ》 + [div.carousel-inner・・・]《スライド画像》 + {[a.carousel-control-prev ...] + [a.carousel-control-next...]}《スライドコントロール》
  • lidiv.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>スライドイメージの紹介</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>スライドイメージの紹介</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>《コンテンツ》]}《キャプション》〕《スライドアイテム》

【Bootstrap3.xとの変更箇所】

  • .carousel-caption.d-none.d-md-block を追加(モバイルではキャプションは表示されない設定)
  • タイトルの見出しの大きさ:<h3><h5>

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

設定例
<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>スライドイメージの紹介</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>スライドイメージの紹介</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>スライドイメージの紹介</p>
			</div>
		</div>
	</div>
	<!-- スライドコントロールの設定 -->
	<a class="carousel-control-prev" href="#carouselOption1" 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="#carouselOption1" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">次へ</span>
	</a>
</div>

※カルーセルでニュースティッカーを作成する方法をJSサンプル集に記載。

クロスフェード(Crossfade)v4.1.0新設

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

見本
設定例
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" src="..." alt="第1スライド">
		</div>
		<div class="carousel-item">
			<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>
	<a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">次へ</span>
	</a>
</div>

【設定】

  • .carousel.slide.carousel-fade を追加

.carousel-itemdata-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>
	<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">次へ</span>
	</a>
</div>

【設定】

  • .carousel-item[data-interval="数値"](数値は1000分の1秒単位でデフォルトは 5000)を入れる

 

使用方法(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"

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

タッチ対応デバイスでは、"hover" に設定すると、循環が自動的に再開する前に、2つの間隔で touchend(ユーザーがカルーセルとのやりとり終了後)で一時停止。これは上記のマウスの動作に加えてある。

ride
v4.0.0追加
string false ユーザーが最初のアイテムを手動で循環した後にカルーセルを自動再生。"carousel" なら、読み込み時に自動でカルーセルが再生。
wrap boolean true カルーセルが、連続的に循環するか強制停止するかどうか。
true:有効/false:無効
touch
v4.2.1追加
boolean true カルーセルがタッチスクリーンデバイス上で左右のスワイプ相互作用をサポートするかどうか。
true:有効/false:無効

【Bootstrap3.xとの変更箇所】

  • pause のタイプ:nullboolean(無効にする場合は null から false の使用に戻る)

メソッド(Methods)サンプル

.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追加

要素のカルーセルを破棄。

イベント(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)。