Bootstrap5のCarousel

このチュートリアルでは、Bootstrap5を使用してカルーセルを作成する方法について説明します。

1. Bootstrap Carouselとは

カルーセルは、一連のコンテンツを循環して表示するスライドショーです。

• 画像、テキスト、ビデオなど、表示したいコンテンツに使用できます。

2. カルーセルの作成

2.1 基本構造

カルーセルの基本的なHTML構造を作成するには、.carousel、.carousel-inner、.carousel-itemなどのクラスを使用します。

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!-- コンテンツ -->
    </div>
    <div class="carousel-item">
      <!-- コンテンツ -->
    </div>
    <div class="carousel-item">
      <!-- コンテンツ -->
    </div>
  </div>
</div>

2.2 画像の追加

.carousel-item内に<img>タグを追加して、画像を表示します。

<div class="carousel-item">
  <img src="..." class="d-block w-100" alt="...">
</div>

2.3 タイトルと説明の追加

.carousel-captionを使用して、画像の上にタイトルと説明を追加できます。

<div class="carousel-item">
  <img src="..." class="d-block w-100" alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>タイトル</h5>
    <p>説明</p>
  </div>
</div>

3. カルーセルコントロール

3.1 ナビゲーションボタン

.carousel-control-prevと.carousel-control-nextクラスを使用して、前へボタンと次へボタンを追加します。

<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">次へ</span>
</button>

3.2 インジケーター

.carousel-indicatorsと.activeクラスを使用して、インジケーターを追加します。これにより、ユーザーは現在どのスライドが表示されているかを知ることができます。

<ol class="carousel-indicators">
  <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
  <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
  <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>

4. カルーセルオプション

カルーセルの動作をカスタマイズするために使用できるオプションがいくつかあります。

5. JavaScriptを使用したカルーセル制御

5.1 カルーセルの初期化

new bootstrap.Carousel()メソッドを使用して、カルーセルを初期化します。

const myCarousel = new bootstrap.Carousel('#myCarousel');

5.2 メソッド

カルーセルの動作を制御するために使用できるメソッドがいくつかあります。

5.3 イベント

カルーセルの状態の変化を処理するために、イベントをリッスンできます。

参考資料

• https://getbootstrap.jp/docs/5.0/components/carousel/

よくある質問

Q1. カルーセルの自動再生を無効にするにはどうすればよいですか？

data-bs-ride="carousel"属性を削除するか、falseに設定します。

Q2. カルーセルにフェードエフェクトを追加するにはどうすればよいですか？

.carouselクラスを持つ要素に.carousel-fadeクラスを追加します。

Q3. カルーセルのスライド数を取得するにはどうすればよいですか？

JavaScriptを使用して、.carousel-item要素の数を取得します。

const slideCount = document.querySelectorAll('.carousel-item').length;