Bootstrap4 Carouselでサムネイル画像を表示

3228 ワード
HTML5 bootstrap4 HTML5 テキストリンク

最近はもっぱらBootsrap4をメインにコーディングしています。
Carouselでサムネイル画像を表示する方法を探してみたのですが、見つからなかったので。
インジケータ付きのサンプルのコードは

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <!-- インジケータの設定 -->
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <!-- スライドさせる画像の設定 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images\image001.jpg" alt="slide1">
    </div><!-- /.carousel-item -->
    <div class="carousel-item">
      <img class="d-block w-100" src="images\image002.jpg" alt="slide2">
    </div><!-- /.carousel-item -->
    <div class="carousel-item">
      <img class="d-block w-100" src="images\image003.jpg" alt="slide3">
    </div><!-- /.carousel-item -->
  </div><!-- /.carousel-inner -->
  <!-- スライドコントロールの設定 -->
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">前へ</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">次へ</span>
 </a>
</div><!-- /.carousel -->

となっているので、インジケータをサムネイル画像に変えて、表示位置を下にずらせば完成。
画像はimg0001.jpgのサムネイル画像をthumb_img0001.jpgとする。
インジケータのコードにサムネイルを背景画像として表示させるように変更。

<li data-target="#carousel-example-generic" data-slide-to="0" class="active" style="background-image: url(./images/thumb_image001.jpg);"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" style="background-image: url(./images/thumb_image002.jpg);"></li>
<li data-target="#carousel-example-generic" data-slide-to="2" style="background-image: url(./images/thumb_image003.jpg);"></li>

次にCSSを修正する。
bootstrap4のCSSを読み込んだ後に、独自のCSSを追加して、
以下のコードを追加する。

.carousel-indicators{
　 bottom:-150px;
}

.carousel-indicators li{
　　width: 332px;　/*サムネイル画像の幅*/
   height: 114px; /*サムネイル画像の縦*/
   background-size:contain;
}

最終的には以下の画像のようなサムネイル付きCarouselが完成する。

プログラムは独学で、文系で業務もマネジメントなので、これが正しいとは言い切れないが
コンポーネントはかなり数が用意されているが、実際にサイトを制作をおこなっていると
既存のコンポーネントだけでは対応しきれいないが、ちょっとしたカスタマイズ方法をおぼえておくと便利かもしれない。