【Bootstrap】画像のスライド表示を実装してみた【カルーセル】

こんにちは朱夏です。

今回はBootstrapを使って、画像のスライドを実装してみます。

参考サイトはこちらです。

Bootstrap4移行ガイド

3 Users

7 Pockets

カルーセル～Bootstrap4移行ガイド

https://cccabinet.jpn.org/bootstrap4/components/carousel

カルーセルのような要素の画像やスライドを循環させるためのスライドショーコンポーネント。

いろんなサイトのトップページで見かけることが多いこの画像スライドは、Bootstrapの「カルーセル(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">

            <!-- 1つ目 -->
            <div class="carousel-item active">
               <img class="d-block w-100" src="画像リンク" alt="第1スライド">
               <div class="carousel-caption d-none d-md-block">
                  <h5>第1スライド見出し</h5>
                  <p>スライドイメージの紹介</p>
               </div>
            </div><!-- /.carousel-item -->
            <!-- 1つ目ここまで -->

            <!-- 2つ目 -->
            <div class="carousel-item">
               <img class="d-block w-100" src="画像リンク" alt="第2スライド">
               <div class="carousel-caption d-none d-md-block">
                  <h5>第2スライド見出し</h5>
                  <p>スライドイメージの紹介</p>
               </div>
            </div><!-- /.carousel-item -->
            <!-- 2つ目ここまで -->

            <!-- 3つ目 -->
            <div class="carousel-item">
               <img class="d-block w-100" src="画像リンク" alt="第3スライド">
               <div class="carousel-caption d-none d-md-block">
                  <h5>第3スライド見出し</h5>
                  <p>スライドイメージの紹介</p>
               </div>
            </div><!-- /.carousel-item -->
            <!-- 3つ目ここまで -->

         </div><!-- /.carousel-inner -->
         <!-- スライドさせる画像の登録ここまで -->

         <!-- スライドコントロールの設定 -->
         <!-- 戻るボタン -->
         <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <div class="py-5 px-2 bg-dark">
               <strong>＜</strong>
            </div>
         </a>
         <!-- 戻るボタンここまで -->

         <!-- 進むボタン -->
         <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <div class="py-5 px-2 bg-dark">
               <strong>＞</strong>
            </div>
         </a>
         <!-- 進むボタンここまで -->

      </div><!-- /.carousel -->
      <!-- カルーセルここまで -->

冗長過ぎるくらいコメントで補足を入れてみました。
これを表示させるとこんな感じのイメージになります。

自分の使っているWordPressのテーマだと、投稿ページ上でカルーセル表示の再現が出来なかったので、サンプルファイルを置いておきました。

ダウンロード

※使用している画像は自分がキャンプに行った時に撮影したものです。

基本機能の実装を簡単に行い、細かなデザインは別途CSSなどで指定すれば、かなりの工数削減が見込めるのではと感じました。
今後使いそうなBootstrapの機能は、事前に勉強してタグをコピペできる様にまとめたいと思います。

今回は以上になります。