Bootstrap

Bootstrapでカルーセル（Carousel）を作る方法

2022年6月30日 by single コメントはまだありません

Bootstrapでカルーセル（Carousel）を作る方法

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Carousel demo</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div><h4>スライドのみ</h4>自動でスライドします。</div>
      <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" style="width:50%">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" class="d-block w-100" alt="ウサギ">
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" class="d-block w-100" alt="ペンギン">
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" class="d-block w-100" alt="カンガルー">
          </div>
        </div>
      </div>
    </div><!-- row -->
    <br />
    <div class="row">
      <h4>コントロール付きスライド</h4>
      <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"  style="width:50%">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" class="d-block w-100" alt="ウサギ">
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" class="d-block w-100" alt="ペンギン">
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" class="d-block w-100" alt="カンガルー">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">次</span>
        </button>
      </div>
    </div><!-- row -->
    <br />
    <div class="row">
      <h4>インジケーター付き</h4>
      <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" style="width:50%">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" class="d-block w-100" alt="ウサギ">
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" class="d-block w-100" alt="ペンギン">
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" class="d-block w-100" alt="カンガルー">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div><!-- row -->
    <br />
    <div class="row">
      <h4>キャプション付き</h4>
      <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel" style="width:50%">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" class="d-block w-100" alt="ウサギ">
            <div class="carousel-caption d-none d-md-block">
              <h5>第１スライド</h5>
              <p>うさぎさん</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" class="d-block w-100" alt="ペンギン">
            <div class="carousel-caption d-none d-md-block">
              <h5>第２スライド</h5>
              <p>ペンギンさん</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" class="d-block w-100" alt="カンガルー">
            <div class="carousel-caption d-none d-md-block">
              <h5>第３スライド</h5>
              <p>カンガルーさん</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button  " data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div> <!-- row -->
    <br />
    <div class="row">
      <h4>フェードトランジション</h4>
      <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel" style="width:50%">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" class="d-block w-100" alt="ウサギ">
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" class="d-block w-100" alt="ペンギン">
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" class="d-block w-100" alt="カンガルー">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div><!-- row -->
    <br />
   <div class="row">
      <h4>その他</h4>
      <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-touch="false" style="width:50%">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active" data-bs-interval="1000" >
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" class="d-block w-100" alt="ウサギ">
            <div class="carousel-caption d-none d-md-block">
              <h5>第１スライド</h5>
              <p>うさぎさん</p>
            </div>
          </div>
          <div class="carousel-item" data-bs-interval="2000">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" class="d-block w-100" alt="ペンギン">
            <div class="carousel-caption d-none d-md-block">
              <h5>第２スライド</h5>
              <p>ペンギンさん</p>
            </div>
          </div>
          <div class="carousel-item"  data-bs-interval="3000">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" class="d-block w-100" alt="カンガルー">
            <div class="carousel-caption d-none d-md-block">
              <h5>第３スライド</h5>
              <p>カンガルーさん</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div><!-- row -->
    <br />
   <div class="row">
      <h4>オプション</h4>
      <div id="carouselExampleOption" class="carousel  slide" data-bs-ride="carousel" data-bs-touch="false" style="width:50%">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleOption" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleOption" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleOption" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" class="d-block w-100" alt="ウサギ">
            <div class="carousel-caption d-none d-md-block">
              <h5>第１スライド</h5>
              <p>うさぎさん</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" class="d-block w-100" alt="ペンギン">
            <div class="carousel-caption d-none d-md-block">
              <h5>第２スライド</h5>
              <p>ペンギンさん</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" class="d-block w-100" alt="カンガルー">
            <div class="carousel-caption d-none d-md-block">
              <h5>第３スライド</h5>
              <p>カンガルーさん</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleOption" 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="#carouselExampleOption" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div><!-- row -->
  </div><!-- container -->
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <script tyle="text/javascript">
    var myCarousel = document.querySelector('#carouselExampleOption')
    var carousel = new bootstrap.Carousel(myCarousel, {
      interval: 1000
      ,keyboard:true /*キーボードイベントに反応するかどうか*/
      ,pause:false /* hover（ポインタをカルーセルの載せても止まらないようにする */
      ,slide : false
      ,wrap: true /* 最初に戻らない */
      ,touch:true
    });
  </script>
</body>
</html>

実装方法

Bootstrap導入

まず、BootstrapのCSSファイルとJSファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

導入方法の詳細は、以下のページをご覧ください。

カルーセル実装

カルーセルブロック生成

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  ...
</div>

まず、divで領域を生成し、classに「carousel slide」、加えて『data-bs-ride』という属性に値「carousel」を設定してください。

カルーセル内部ブロック生成
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    ...
  </div>
</div>

次に内部にdiv領域を生成し、classに「carousel-inner」を指定してください。

カルーセル項目ブロック生成
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    ...
  </div>
</div>

最後に、項目ブロックを生成します。div領域を生成し、classに「carousel-item」を指定してください。

項目初期選択方法
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <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>
</div>

項目を初期選択させるにはカルーセルの項目ブロックに、class「active」を追加してください。

カルーセル種類

コントロール付きスライド

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

カルーセルの項目オブジェクトのbuttonオブジェクトを設定し、classに「carousel-control-prev」または「carousel-control-next」を設定することで、コントロール付きのカルーセルを設定できます。

また「data-bs-target」属性を設定し、値としてカルーセルブロックのidとすることでカルーセルと紐づけられます。

インジケーター付き

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

カルーセルオブジェクト内部にdiv領域を設定しclassに「carousel-indicators」を設定してください。

そして、その領域にbuttonオブジェクトを設定しすることで、全項目数のうち現在表示されているのが何番目であるのかをビジュアル的に示してくれるインジケーターを設定できます。

かつ、各buttonに「data-bs-target」属性を設定し、値としてカルーセルブロックのidとすることでカルーセルと紐づけられます。

キャプション付き

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

カルーセル項目ブロック内部にdivを設定し、classに「carousel-caption」を設定することでその内部にキャプションを設定できます。HTMLタグも利用可能です。

フェードトランジション

<div id="carouselExampleFade" class="carousel slide carousel-fade" 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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

カルーセルブロックのclassに「carousel-fade」を設定すると、カルーセル項目の変更が横にスライドして変更されるのではなく、フェイドアウト／フェイドインするような感じで切り替わります。

その他

項目切り替え時間（項目のインターバル）

属性「data-bs-interval」をミリ秒で設定すると各項目の表示時間を定義できます。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <!-- 10秒で切り替える場合 -->
      <img src="..." class="d-block w-100" data-bs-interval="10000" alt="...">
    </div>
    ...
  </div>
</div>

なお、値に『false』を指定すると、自動切り替えが無効になります。

スワイプ移動無効

属性「data-bs-touch」の値に『false』を設定すると、スワイプでスライドさせるのを無効にさせることができます。

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  ...
</div>
ダークスタイル

classに「carousel-dark」を指定するとスタイルが違ったカルーセルになります。

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  ...
</div>

オプション

Javascriptを利用することで、カルーセルをカスタイマイズできます。

<div id="carouselExampleOption" class="carousel  slide" data-bs-ride="carousel" >
  ...
</div>

  <script tyle="text/javascript">
    var myCarousel = document.querySelector('#carouselExampleOption')
    var carousel = new bootstrap.Carousel(myCarousel, {
      interval: 1000
      ,keyboard:true /*キーボードイベントに反応するかどうか*/
      ,pause:false /* hover（ポインタをカルーセルの載せても止まらないようにする */
      ,slide : false
      ,wrap: true /* 最初に戻らない */
      ,touch:true
    });
  </script>

オプションは以下の通りになります。

interval

項目の切り替え間隔。ミリ秒で指定してください。

デフォルトは「5000」（５秒）です。

keyboard

カルーセルがキーボードイベントに反応するかどうかのオプションです。

←キーや→キーで項目を移動だせることができます。

デフォルトは「true」です。

pause

スライドショーの停止イベントを定義できるオプションです。

デフォルトは「hover」で、マウスを乗せるとスライドショーが停止します。

「false」を指定すると停止しなくなります。

slide

ユーザーが最初のアイテムを手動で循環させた後、カルーセルを自動再生させるオプションです。

「carousel」の場合、ロード時にカルーセルを自動再生します。

デフォルトは「false」です。

wrap

カルーセルを循環させることができるオプションです。

デフォルトは「true」です。

touch

タッチスクリーンデバイスでカルーセルが左右スワイプインタラクションをサポートするかどうかのオプションです。

デフォルトは「true」です。

ご参考

関連ページ