解 説

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

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

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

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

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

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

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

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