Bootstrap4のCarousel(カルーセル)コンポーネントの使い方を解説。

画像やコンテンツのスライドショーとして使えるカルーセルを使えば、jQueryプラグインを追加しなくても良いのでページの読み込み改善にも役立つコンポーネントです。

普通のスライドショーだけでなく、ちょこっとカスタマイズすれば結構いろいろできちゃいます。

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 - 左右のコントロールで使用、prevnextを指定

Carouselのカスタマイズサンプルコード

Crouselコンポーネントのカスタマイズ例を紹介します。コードは以下のデモページで動作を確認できます。

デモページを見る

Carouselの左右の矢印をマテリアルアイコンに変える

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コンポーネントを並べる

Carouselのスライド画像の代わりにCardコンポーネントを並べる

Bootstrap4のカルーセルには画像だけでなく、Cardコンポーネントも設置することができます。

メディアサイトやECサイトによくあるコンテンツスライダーも簡単に作成可能。ただし、レスポンシブ対応は面倒くさそうなので、おとなしくjQueryプラグインを使った方がいいかもしれません。

やり方は次の通り。

  1. carousel-item内にcardコンテンツを作成(グリッドも合わせて)
  2. 前後ボタンをきれいに表示するため、carousel-itemを少し狭くする(px-5を追加)
  3. スタイルで前後ボタンの幅とボタンスタイルを修正
<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の下にあるナビゲーション(インジケーター)をサムネイル化する

Carouselの下にあるナビゲーション(インジケーター)をサムネイル化する

indicatorにはdata-targetdata-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プラグインのスライダーを使った方がいいですね。