とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > カルーセル

カルーセル(carousel)は、回転木馬や回転棚を意味します。イメージなどのコンテンツを横方向にスライドさせながら順番に表示します。.carousel, .slide でカルーセル全体を、.carousel-inner でカルーセルの内部コンテンツセットを、.carousel-item で個々のコンテンツアイテムを示します。data-ride="carousel" を指定すると画面を読み込んだ時点でスライドを開始します。デフォルトで 5秒毎にスライドします。マウスを乗せている時はスライドしません。.active は表示中のスライドを示します。

Sample
Code
<div class="carousel slide" data-ride="carousel" style="width:400px">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="slide2.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="slide3.png" alt="Third slide">
    </div>
  </div>
</div>

.carousel-control-{prev|next}, .carousel-control-{prev|next}-icon は、左右の矢印アイコンを押すことでスライドする、コントローラ付きのカルーセルを表示します。

Sample
Code
<div id="example-2" class="carousel slide" data-ride="carousel" style="width:400px">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="slide2.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="slide3.png" alt="Third slide">
    </div>
    <a class="carousel-control-prev" href="#example-2" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#example-2" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

.carousel-indicators は、カルーセルの中央下部に、今どのコンテンツを表示しているかのインジケータを表示します。

Sample
Code
<div id="example-3" class="carousel slide" data-ride="carousel" style="width:400px">
  <ol class="carousel-indicators">
    <li data-target="#example-3" data-slide-to="0" class="active"></li>
    <li data-target="#example-3" data-slide-to="1"></li>
    <li data-target="#example-3" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    :
  </div>
</div>

.carousel-caption は、各スライドのキャプションを表示します。

Sample
Code
<div class="carousel slide" data-ride="carousel" style="width:400px">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." alt="...">
      <div class="carousel-caption" style="top:50px">
        <h6>Caption of first slide</h6>
      </div>
    </div>
  </div>
    :
</div>

.carousel-fade は、スライドをクロスフェード(前のスライドをフェードアウトさせながら、次のスライドをフェードイン)させます。

Sample
Code
<div class="carousel slide carousel-fade" data-ride="carousel" style="width:400px">
  :
</div>

オプション

data-interval= などの値は、カルーセルのオプションを指定します。

名前 規定値 説明
data-interval number 5000 自動スライドの時間をミリ秒単位で指定します。
data-keyboard boolean true キーボードイベントに反応するか否かを true または false で指定します。
data-pause string | boolean hover hover を指定すると、カルーセルにマウスを乗せている間スライドが停止します。false を指定すると常に停止しません。
data-ride string false false を指定すると、ユーザが最初のスライドをスライドさせてから自動スライドが始まります。carousel を指定すると画面が表示された時点で自動スライドが始まります。
data-wrap boolean true true を指定すると自動スライドは永遠に継続します。false を指定すると最後のスライドが表示された時点で自動スライドは停止します。
data-touch boolean true タッチスクリーンで左右のスワイプをサポートするか否かを指定します。
Sample
Code
<div class="carousel slide" data-interval=2000 data-ride="carousel" style="width:400px">
  :
</div>

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/carousel.html