Bootstrapの使い方（９）〜カルーセルを使う

Bootstrap4の公開も間近になりましたが、今回はBootstrap3を使ってカルーセルを適用する方法です。カルーセルとはメリーゴーランドの意味があります。一般的にはスライドショー的なものが多いです。
カルーセルの善し悪しについて色々意見があるものの、現実的には多くのWebサイトで使われています。作る側としてはとりあえず入れておけばなんとか形になるしレイアウトを考えるのも楽なのかもしれません。

さて、Bootstrapでカルーセルを搭載するのは簡単です。
Bootstrapの本家にあるコードをコピペするだけです。

Bootstrapでカルーセルを搭載する方法

Bootstrap本家のカルーセルのコードは下記のとおりです。
カルーセルサンプル

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="images/img-01.jpg" alt="">
      <div class="carousel-caption">
      サンプル画像１
      </div>
    </div>
    <div class="item">
      <img src="images/img-02.jpg" alt="">
      <div class="carousel-caption">
        サンプル画像２
      </div>
    </div>
    <div class="item">
      <img src="images/img-03.jpg" alt="">
      <div class="carousel-caption">
        サンプル画像３
      </div>
    </div>
    <div class="item">
      <img src="images/img-04.jpg" alt="">
      <div class="carousel-caption">
        サンプル画像４
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

実際の画像の表示はdiv class=”carousel-inner” role=”listbox”の中のimgタグです。
インジケーター部分はol class=”carousel-indicators”で、画像の枚数に応じてliを増やします。

カルーセルの幅をカスタマイズ

カルーセルの幅をデフォルトより小さくしたい場合は、BootstrapのCSSとは別にカスタマイズ用のCSSを用意して次のように記述します。
カスタマイズ用のCSSはBootstrapのCSSより後にlink要素で読み込むようにします。BootstrapのCSSは直接変更はしないようにしましょう。

.carousel{
  width:80%;  /*希望するサイズ*/
  margin:auto;
}

画像を拡大してデフォルトのカルーセルの幅に合わせたい場合は、次のようにします。

.carousel img{
  width:100%;
}