Bootstrap4のCarousel（カルーセル）コンポーネントの使い方を解説。
画像やコンテンツのスライドショーとして使えるカルーセルを使えば、jQueryプラグインを追加しなくても良いのでページの読み込み改善にも役立つコンポーネントです。
普通のスライドショーだけでなく、ちょこっとカスタマイズすれば結構いろいろできちゃいます。
Bootstrap4 Carousel（カルーセル）の基本的な使い方
Bootstrap4のカルーセルは画像やテキストなどをスライド表示できるコンポーネントです。
左右のコントローラや下部に表示されるインジケーターをクリックすると画像が切り替わる仕組み。
基本構造
.carouselの親要素内にインジケータ、コンテンツ、コントローラが入ってます。
基本的にはドキュメントのコードをコピペして画像タグのsrcに画像のURLを入れればそのまま使えます。
<div id="carousel-1" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placehold.it/1200x400" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".https://placehold.it/1200x400" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placehold.it/1200x400" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-1" 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="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>自動スライドon/offやスピードのカスタマイズ
CarouselはjavascriptをいじらなくてもHTMLタグ上で自動スライドのon/offやスピードをある程度変更できます。
詳細はオプションの項目を参照。
<div id="carousel-2" class="carousel slide" data-interval="10000">
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-2" data-slide-to="1"></li>
<li data-target="#carousel-2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placehold.it/1200x400" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".https://placehold.it/1200x400" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placehold.it/1200x400" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-2" 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="#carousel-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Carouselで使えるClassとオプションまとめ
Class一覧
カルーセルで使用されるClassはこちら。
| Class名 | 説明 |
|---|---|
.carousel |
Carouselを定義 |
.carousel.slide |
横スライドエフェクトを追加 |
.carousel.slide.carousel-fade |
フェードインエフェクトを追加 |
.carousel-indicators |
Carouselの下部に表示されるインジケータ |
.carousel-inner |
Carouselの中身 |
.carousel-item |
表示するコンテンツ |
.carousel-caption |
コンテンツのキャプション |
.carousel-control-prev |
前のコンテンツに戻るボタン |
.carousel-control-next |
次のコンテンツに進むボタン |
オプション一覧
オプションはHTMLタグに入れることで、javascriptを書かなくてもある程度カスタマイズができるもの。data-ride="carousel"のように値を入れて使います。
| オプション名 | デフォルト | 説明 |
|---|---|---|
data-interval |
5000 | 切り替えスピード。デフォルトは5秒 |
data-keyboard |
true | キーボードイベントを有効にするかどうか |
data-pause |
hover | hoverにするとマウスオーバーでサイクルを停止できる |
data-ride |
false | falseでユーザーが動かした後自動切り替え、carouselで最初から自動切り替え |
data-wrap |
true | サイクルを循環させるか、最後まで行ったら停止するか |
data-target |
- | インジケーターとカルーセル本体を紐付ける、値には#idを入れる |
data-slide-to |
- | インジケーターとスライドの番号を紐付ける |
data-slide |
- | 左右のコントロールで使用、prevかnextを指定 |
Carouselのカスタマイズサンプルコード
Crouselコンポーネントのカスタマイズ例を紹介します。コードは以下のデモページで動作を確認できます。
Carouselの左右の矢印をマテリアルアイコンに変える
spanで設定されているアイコンをマテリアルアイコンに変更するだけ。細目の矢印アイコンに変わるので見た目もスッキリします。
<div id="carousel-icon" class="carousel slide">
<!-- 省略 -->
<a class="carousel-control-prev" href="#carousel-icon" role="button" data-slide="prev">
<i class="material-icons">arrow_back_ios</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-icon" role="button" data-slide="next">
<i class="material-icons">arrow_forward_ios</i>
<span class="sr-only">Next</span>
</a>
</div>Carouselのスライド画像の代わりにCardコンポーネントを並べる
Bootstrap4のカルーセルには画像だけでなく、Cardコンポーネントも設置することができます。
メディアサイトやECサイトによくあるコンテンツスライダーも簡単に作成可能。ただし、レスポンシブ対応は面倒くさそうなので、おとなしくjQueryプラグインを使った方がいいかもしれません。
やり方は次の通り。
carousel-item内にcardコンテンツを作成（グリッドも合わせて）- 前後ボタンをきれいに表示するため、
carousel-itemを少し狭くする（px-5を追加） - スタイルで前後ボタンの幅とボタンスタイルを修正
<div class="container">
<div id="carousel-card" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-card" data-slide-to="0" class="active"></li>
<li data-target="#carousel-card" data-slide-to="1"></li>
<li data-target="#carousel-card" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item px-5 active">
<div class="row">
<div class="col-4">
<div class="card">
<img class="card-img-top" src="https://placehold.it/400x300" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img class="card-img-top" src="https://placehold.it/400x300" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img class="card-img-top" src="https://placehold.it/400x300" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item px-5">
<!-- 省略 -->
</div>
<div class="carousel-item px-5">
<!-- 省略 -->
</div>
</div>
<a class="carousel-control-prev" href="#carousel-card" 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="#carousel-card" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<style>
.carousel-control-next, .carousel-control-prev {
width: 5%;
background-color: #000;
}
</style>Carouselの下にあるナビゲーション（インジケーター）をサムネイル化する
indicatorにはdata-targetとdata-slide-toだけがあればよく、中身は画像でも可。デフォルトだとli要素のスタイルで画像が表示されないため、CSSで修正する必要があります。
メディアクエリを使ってサムネイル用のCSSをPC画面のみ有効にすれば、スマホではデフォルトのインジケータにすることもできます。
<div class="container">
<div id="carousel-indicator" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-indicator" data-slide-to="0" class="active">
<img src="https://placehold.it/100x50" alt="img">
</li>
<li data-target="#carousel-indicator" data-slide-to="1">
<img src="https://placehold.it/100x50" alt="img">
</li>
<li data-target="#carousel-indicator" data-slide-to="2">
<img src="https://placehold.it/100x50" alt="img">
</li>
</ol>
<div class="carousel-inner">
<!-- 省略 -->
</div>
</div>
</div>まとめ
Carouselコンポーネントはちょっとしたスライド表示なら十分実用的なコンポーネント。カスタマイズすることでデフォルトのスタイルを修正することもできます。
ただ、スマホ対応や細かいエフェクトをつけようと思うとやっぱりjQueryプラグインのスライダーを使った方がいいですね。