カルーセル carousel は、「メリーゴーラウンド merry-go-round」「回転木馬」、またはそれに模した、いにしえのスライド映写機の「回転式スライド装置」を指す。

ここで紹介するのは、これらにならって、複数の画像が横スライドで入れ替わるような表示効果を web 上で実現するものである。web ではトップページのメインビジュアルなどでしばしば見かける。

Bootstrap では、このカルーセル用にクラスが用意されている。多少記述量があるが、決まり切った記述で細かい機能まで備えたカルーセルが実現できる。

例:

<div id="c1" class="carousel slide" data-ride="carousel">
 <ol class="carousel-indicators">
  <li data-target="#c1" data-slide-to="0" class="active"></li>
  <li data-target="#c1" data-slide-to="1"></li>
  <li data-target="#c1" data-slide-to="2"></li>
  <li data-target="#c1" data-slide-to="3"></li>
 </ol>
 <div class="carousel-inner">
   <div class="carousel-item active">
    <img src="../CSS01/test01.jpg">
    <div class="carousel-caption">
     <p>上川牧場?</p>
    </div>
   </div>
   <div class="carousel-item">
    <img src="../CSS01/test02.jpg">
    <div class="carousel-caption">
     <p>旭山動物園</p>
    </div>
   </div>
   <div class="carousel-item">
    <img src="../CSS01/test03.jpg">
    <div class="carousel-caption">
     <p>標津図書館まつり</p>
    </div>
   </div>
   <div class="carousel-item">
    <img src="../CSS01/test04.jpg">
    <div class="carousel-caption">
     <p>釧路の夕日</p>
    </div>
   </div>
 </div>
 <a class="carousel-control-prev" href="#c1" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 </a>
 <a class="carousel-control-next" href="#c1" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
 </a>
</div>