【初心者の方向け】 Bootstrap4の使い方カルーセル

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

Bootstrapでカルーセルを扱うこともできます。

カルーセルとは、スライドやスライドショーなどとも呼ばれ、ひとつの領域に視覚的に訴えることのできるコンテンツを複数表示を可能にできるものです。TOPページに使われる事が多く、シンプルな動作でありながら見た目的にも良く、デザインの幅も広がるかと思います。

今回は、カルーセルの基本的な設置方法になります。

Bootstrap4のバージョン4.3をベースに書いています。

基本的なカルーセル

スライドのみになります。サンプルでは画像が左から右へスライドされるのが確認できます。

サンプルコードになります。

スライドをおこなう要素のひとつには必ず.activeクラスを追加してください。こちらが無いとカルーセルが動作しません。

また各要素には.d-block(display-block)と.w-100(width=”100%”)を指定してください。

<div id="carouselsample-1" class="carousel slide" data-ride="carousel">
  <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>
</div>

フェードでの切り替え

.carousel-fadeクラスを追加する事により、フェードでの表示になります。

サンプルコード

<div id="carouselsample-2" class="carousel slide carousel-fade" data-ride="carousel">
  <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>
</div>

コントロールの表示

カルーセルの前後の切り替えをする為のコントロールの表示になります。
サンプルでは要素の左右に矢印が表示されます。

Previous

Next

サンプルコード

.carousel要素内に.carousel-control-prevまたは.carousel-control-nextを追加します。

<div id="carouselsample-3" class="carousel slide" data-ride="carousel">
  <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>
  <a class="carousel-control-prev" href="#carouselsample-3" 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="#carouselsample-3" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

インジケーターの表示

カルーセルにコントロールとインジケーターをつけます。
インジケーターにはサムネイル画像などを表示することもできますが、応用的な使い方に関しては別の機会で書きます。

Previous

Next

サンプルコード

<div id="carouselsample-4" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselsample-4" data-slide-to="0" class="active"></li>
    <li data-target="#carouselsample-4" data-slide-to="1"></li>
    <li data-target="#carouselsample-4" data-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselsample-4" 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="#carouselsample-4" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

キャプションを表示

カルーセル内にキャプション（見出し）を入れることもできます。

.carousel-innerの各アイテム内に、.carousel-captionクラスを追加します。

<img・・・>

キャプション用テキスト

</div><!—End carousel-caption->

</div><!—End carousel-item->

見出し１

これは見出し１です

見出し２

これは見出し２です

見出し３

これは見出し３です

サンプルコード

サンプルでは、画面幅に関係なくキャプションを表示させていますが、キャプションのテキスト内容が多い場合、スマホなどで表示される際に、レイアウトが崩れてしまいます。

その際、.carousel-captionに.d-done .d-md-blockなど追加する事により、画面幅の小さいデバイスで見られた場合にキャプションを隠すこともできます、

<div id="carouselsample-5" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption"> 
        <h3>見出し１</h3>
        <p>これは見出し１です</p>
        </div>
    </div>
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption"> 
        <h3>見出し２</h3>
        <p>これは見出し２です</p>
        </div>
    </div>
     <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption"> 
        <h3>見出し３</h3>
        <p>これは見出し３です</p>
        </div>
    </div>
  </div>
</div>