とほほのBootstrap 4入門

カルーセル

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

Sample

First slide

Second slide

Third slide

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

First slide

Second slide

Third slide

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

First slide

Second slide

Third slide

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

First slide

Caption of first slide

Second slide

Caption of second slide

Third slide

Caption of third slide

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

First slide

Second slide

Third slide

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

First slide

Second slide

Third slide

Code

<div class="carousel slide" data-interval=2000 data-ride="carousel" style="width:400px">
  :
</div>

初版:2015年9月6日最終更新:2019年1月6日

http://www.tohoho-web.com/bootstrap/carousel.html