Bootstrap カルーセル

このドキュメントでは、BootstrapフレームワークのCarouselプラグインの使い方について説明します。基本的なカルーセルの作成方法、コントロールボタンとインジケーターの追加方法、カルーセルオプションの設定方法、JavaScriptを使用したカルーセルの制御方法などを紹介します。

1. 概要 (Bootstrap カルーセル)

カルーセルプラグインは、画像やコンテンツをスライドショー形式で表示するためのものです。レスポンシブなデザインに対応しており、モバイルデバイスでも適切に表示されます。

2. 基本的なカルーセル

<div id="myCarousel" class="carousel slide" data-bs-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: カルーセル全体を囲むコンテナです。
• .carousel-inner: スライドするアイテムをまとめるコンテナです。
• .carousel-item: 各スライドを表します。activeクラスを持つアイテムが最初に表示されます。
• data-bs-ride="carousel": ページ読み込み時にカルーセルを自動的に開始します。

3. コントロールの追加

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- 前のスライドへのボタン -->
  <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">Previous</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">Next</span>
  </button>

  <!-- カルーセルの中身は省略 -->
</div>

**説明:**

• .carousel-control-prev: 前のスライドへ移動するボタンです。
• .carousel-control-next: 次のスライドへ移動するボタンです。
• data-bs-target="#myCarousel": ボタンが制御するカルーセルのIDを指定します。
• data-bs-slide="prev" / data-bs-slide="next": スライドの方向を指定します。

4. インジケーターの追加

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- インジケーター -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

  <!-- カルーセルの中身は省略 -->
</div>

**説明:**

• .carousel-indicators: インジケーターを囲むコンテナです。
• data-bs-target="#myCarousel": インジケーターが制御するカルーセルのIDを指定します。
• data-bs-slide-to="0": クリックしたときに表示するスライドのインデックスを指定します (0から始まります)。
• activeクラス: 現在表示されているスライドのインジケーターに付与します。

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

カルーセルの動作をカスタマイズするために、いくつかのオプションを設定することができます。オプションは、JavaScriptで設定するか、data属性を使用してHTMLに記述することができます。

6. JavaScriptの使用

<script>
  var myCarousel = document.getElementById('myCarousel')
  var carousel = new bootstrap.Carousel(myCarousel, {
    interval: 2000, // スライド間の間隔を2秒に設定
    wrap: false // 最後のスライドで停止
  })
</script>

**説明:**

• bootstrap.Carousel(): カルーセルのインスタンスを作成します。
• interval: スライド間の間隔を設定します。
• wrap: 最後のスライドで停止するように設定します。

7. まとめ

このドキュメントでは、Bootstrapのカルーセルプラグインの基本的な使い方について説明しました。詳細については、公式ドキュメントを参照してください。

関連リソース:

• <a href="https://getbootstrap.jp/docs/5.0/components/carousel/">Bootstrap カルーセル</a>

Q&A

Q1: カルーセルのスライド数を動的に変更するにはどうすればよいですか？

A1: JavaScriptを使用してカルーセルのHTMLを動的に生成し、bootstrap.Carousel() を使用してカルーセルを再初期化します。

Q2: カルーセルの特定のイベント（スライド開始時、スライド終了時など）で処理を実行するにはどうすればよいですか？

A2: カルーセルのイベントリスナーを使用します。例えば、スライド開始時に処理を実行するには、`slide.bs.carousel` イベントをリッスンします。

Q3: カルーセル内の画像の縦横比を維持するにはどうすればよいですか？

A3: `carousel-item` 要素内に `<img>` タグを直接配置するのではなく、 `<div>` 要素で囲み、CSS を使用して画像の縦横比を維持します。例えば、 `object-fit: cover;` プロパティを使用します。