ぱそくま ろご
開発 > Bootstrap > Bootstrap カルーセル(スライドショー)

Bootstrap カルーセル(スライドショー)

Bootstrap カルーセルとは?

カルーセル(carousel)は日本語で「回転木馬」の意味で、WEBでは自動で動くスライドショーをさします。 なお、その名の通り、最終ページ表示後は先頭ページに戻ってスライドショーを始めます。 カルーセルの作り方は以下の通りです。

  • カルーセルの大枠となる.carouselを持つdivタグを用意する。なお、必ずid属性は設定してください。
  • その中にページ(番号)のインジケーターを作成します。
  • スライドショー用のイメージリストも作成します。
  • 最後にページスライド用バーを作成します。


例:Bootstrap カルーセル

<!-- カルーセル -->
<div id="main-carousel" class="carousel slide" data-ride="carousel">

  <!-- ページのインジケーター -->
  <ol class="carousel-indicators">
    <li data-target="#main-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#main-carousel" data-slide-to="1"></li>
    <li data-target="#main-carousel" data-slide-to="2"></li>
  </ol>

  <!-- スライドショーのイメージリスト -->
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="/img/dev/web/bootstrap/carousel_bg1.png" alt="1ページ目">
    </div>
    <div class="carousel-item">
      <img src="/img/dev/web/bootstrap/carousel_bg2.png" alt="2ページ目">
    </div>
    <div class="carousel-item">
      <img src="/img/dev/web/bootstrap/carousel_bg3.png" alt="3ページ目">
    </div>
  </div>

  <!-- 右側の手動スライド -->
  <a class="left carousel-control" href="#main-carousel" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">次へ</span>
  </a>

  <!-- 左側の手動スライド -->
  <a class="right carousel-control" href="#main-carousel" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">前へ</span>
  </a>
</div>

例:Bootstrap カルーセルの表示例

Bootstrap カルーセルの解説

Bootstrap カルーセル .carouselに関して

まずは、大枠となる<div id="main-carousel" class="carousel slide" data-ride="carousel">ですが、

  • id属性はインジケーターと結びつけるために必要です。(インジケーターのdata-target属性にこのid属性を指定します。)
  • .slideを指定すると画像がスライドします。このクラスがない場合、画面が効果なしに切り替わります。
  • data-ride="carousel"を指定すると自動でスライドショーを開始します。 指定されていない場合は、先頭の画像が表示されっぱなしです。(ただし、手動で切り替えを1度でも行うと、スライドショーが開始されます。)

なお、data-ride以外にもオプションがあり、詳細は下表を参照してください。

カルーセルのオプション
オプション データ型 デフォルト値 説明
interval number 5000 スライドショーの間隔です。ミリ秒で指定します。
pause string | null 'hover' スライドショーを一時停止する条件を指定します。nullを指定すると一時停止しなくなります。
wrap boolean on onの場合、最終ページ表示後に、また、先頭を表示します。offの場合、最終ページでスライドショーが終わります。
keyboard boolean on

Bootstrap カルーセル .carousel-itemに関して

このページの例ではイメージリストのアイテムに画像のみを指定していますが、キャプションをつけることができます。 方法はimgタグの下に.carousel-captionを持つdivタグを用意するだけです。

例:Bootstrap カルーセルのイメージにキャプションを追加

  <!-- スライドショーのイメージリスト -->
  <div class="carousel-inner" role="listbox">

    <div class="carousel-item active">

      <img src="/img/dev/web/bootstrap/carousel_bg1.png" alt="1ページ目">

      <!-- キャプション -->
      <div class="carousel-caption">
        <h3>タイトル</h3>
        <p>説明</p>
      </div>

    </div>