Bootstrapで作る簡単！スライドショーを作ってみよう

Contents

完成イメージ

Bootstrap06：スライドショーを作ってみよう

作成ファイル・保存場所

bootstrap フォルダに以下のファイルを作成してください。

ファイル名	内容
bootstrap06.html	Bootstrapのフォーム装飾練習用ファイル
※CSSファイル不要	BootstrapはCDNで読み込みます

目的

Bootstrapのカルーセル（carousel）コンポーネントを使って、画像のスライドショーを実装できるようになる。

チェックポイント

carousel クラスでスライドショーを作れる
.carousel-item に画像を入れて切り替え表示する
ドット（インジケーター）やナビボタンで操作できる
data-bs-ride="carousel" で自動再生ができる
data-bs-interval で切り替え時間を変更できる

作業ステップ

Bootstrapトレーニング

JavaScript CDN

公式では、</body>の上に配置するように指定されています。もし<head>内に配置する場合はdeferをつけてください。

<!-- Popper.js（必須） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>

<!-- BootstrapのJS本体 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>

bootstrap.bundle.min.js を使うと Popper.js がすでに含まれていて、別で読み込む必要がなくなります

<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"></button>
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
  </div>

  <!-- スライド本体 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img1.jpg" class="d-block w-100" alt="スライド1">
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" class="d-block w-100" alt="スライド2">
    </div>
    <div class="carousel-item">
      <img src="img3.jpg" class="d-block w-100" alt="スライド3">
    </div>
  </div>

  <!-- 前後のボタン -->
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>