【Bootstrapのコンポーネント】カルーセル(Carousel)に関して

本記事では、Bootstrapのカルーセルコンポーネントについて解説していきます。

カルーセルとは、webサイトのトップページでよく見る、メイン画像がスライドして変わる仕掛けのことです。

これをBootstrapで作成していきます。

カルーセルにもいくつか装飾の種類があるので、それについて見ていきましょう。

Bootstrapのカルーセルの種類

Bootstrapの代表的なカルーセルの種類は3つで、以下の通りです。

カルーセルのみ(6秒毎に画像が変わる)

コントローラー付きカルーセル

コントローラー・インジケーター付きカルーセル

では、それぞれについてどのようにコードを記述していくのかを見ていきます。

Bootstrapのカルーセルの記述方法

カルーセルのみ(6秒毎に画像が変わる)

カルーセルのみ

  1. <div class=”container”>
  2.       <div class=”carousel slidedata-ride=”carousel”>
  3.         <div class=”carousel-inner“>
  4.           <div class=”carousel-item active“>
  5.             <img src=”https://placehold.jp/1200×540.png” class=”d-block w-100″ alt=””>
  6.           </div>
  7.           <div class=”carousel-item”>
  8.             <img src=”https://placehold.jp/1200×530.png” class=”d-block w-100″ alt=””>
  9.           </div>
  10.         </div>
  11.       </div>
  12.     </div>

 

6秒後に画像が自動でスライドし、切り替わる

切り替わった後の画像

注意点としては、active属性を付けるのは、最初に表示したい画像だけということです。
activeを2つ以上の画像につけてしまうと、カルーセルが機能しなくなってしまうので気をつけましょう。

補足として、以下は、Bootstrap4のjsとのひも付けを意味する記述です。

data-ride="carousel"

コントローラー付きカルーセル

コントローラー付きカルーセル

  1.     <div class=”container”>
  2.       <div id=”hoge” class=”carousel slide” data-ride=”carousel”>
  3.         <div class=”carousel-inner”>
  4.           <div class=”carousel-item active”>
  5.             <img src=”https://placehold.jp/1200×540.png” class=”d-block w-100″ alt=””>
  6.           </div>
  7.           <div class=”carousel-item”>
  8.             <img src=”https://placehold.jp/1200×530.png” class=”d-block w-100″ alt=””>
  9.           </div>
  10.           <div class=”carousel-item”>
  11.             <img src=”https://placehold.jp/1200×540.png” class=”d-block w-100″ alt=””>
  12.           </div>
  13.           <div class=”carousel-item”>
  14.             <img src=”https://placehold.jp/1200×530.png” class=”d-block w-100″ alt=””>
  15.           </div>
  16.         </div>
  17.         <a class=”carousel-control-prev” href=”#hoge” data-slide=”prev”>
  18.           <span class=”carousel-control-prev-icon”></span>
  19.         </a>
  20.         <a class=”carousel-control-next” href=”#hoge” data-slide=”next”>
  21.           <span class=”carousel-control-next-icon”></span>
  22.         </a>
  23.       </div>
  24.     </div>

 

コントローラーが出現

コントローラーを押して、切り替わる瞬間の画像

画像が切り替わる

id=”hoge”を追加しましたが、このid名は任意の(自由につけて良い)ものです。

また、ここに来て、<div class=”carousel-inner”>と同階層の位置にある、最後の所に、下記のaタグを追加しました。

 <a class="carousel-control-prev" href="#hoge" data-slide="prev">
  <span class="carousel-control-prev-icon"></span>
 </a>
 <a class="carousel-control-next" href="#hoge" data-slide="next">
  <span class="carousel-control-next-icon"></span>
 </a>

これは、コントローラーを表示する記述です。

コントローラー・インジケーター付きカルーセル

コントローラー・インジケーター付きカルーセル

  1.     <div class=”container”>
  2.       <div id=”hoge” class=”carousel slide” data-ride=”carousel”>
  3.         <ol class=”carousel-indicators”>
  4.           <li data-target=”#hoge” data-slide-to=”0″ class=”active”></li>
  5.           <li data-target=”#hoge” data-slide-to=”1″></li>
  6.           <li data-target=”#hoge” data-slide-to=”2″></li>
  7.         </ol>
  8.         <div class=”carousel-inner”>
  9.           <div class=”carousel-item active”>
  10.             <img src=”https://placehold.jp/1200×540.png” class=”d-block w-100″ alt=””>
  11.           </div>
  12.           <div class=”carousel-item”>
  13.             <img src=”https://placehold.jp/1200×530.png” class=”d-block w-100″ alt=””>
  14.           </div>
  15.           <div class=”carousel-item”>
  16.             <img src=”https://placehold.jp/1200×540.png” class=”d-block w-100″ alt=””>
  17.           </div>
  18.           <div class=”carousel-item”>
  19.             <img src=”https://placehold.jp/1200×530.png” class=”d-block w-100″ alt=””>
  20.           </div>
  21.         </div>
  22.         <a class=”carousel-control-prev” href=”#hoge” data-slide=”prev”>
  23.           <span class=”carousel-control-prev-icon”></span>
  24.         </a>
  25.         <a class=”carousel-control-next” href=”#hoge” data-slide=”next”>
  26.           <span class=”carousel-control-next-icon”></span>
  27.         </a>
  28.       </div>
  29.     </div>

 

インジケーターが出現

画像の下にインジケーターが表示されました。
また、インジケーターをクリックすると画像が切り替わる仕様にもなっています(仕様としては通常)

少し解説を入れると、以下のコードを<div class=”carousel-inner”>と同階層の位置にある、始まりの所に、下記のol・liタグを追加しました。

 <ol class="carousel-indicators">
  <li data-target="#hoge" data-slide-to="0" class="active"></li>
  <li data-target="#hoge" data-slide-to="1"></li>
  <li data-target="#hoge" data-slide-to="2"></li>
 </ol>

前回、コントローラーを追加したときは、同階層の、最後の位置にある所でしたが、今回のインジケーターは始まりの所です。

また、今回もidに#hogeを指定していますが、こちらも任意のもので結構です。

最後にここでも、class=”active”が入っていますが、記述するのはliタグの一つにするということに注意してください。

まとめ

Bootstrapのカルーセルコンポーネントについて解説しました。

代表的なものには以下の3つがありましたね。

カルーセルのみ(6秒毎に画像が変わる)

コントローラー付きカルーセル

コントローラー・インジケーター付きカルーセル

 

「カルーセルのみ」のカルーセルは、あまり見かけず、ユーザー目線で見るならコントローラー、もしくはインジケーターも付いたものが一般的だと思います。

なお、他にもカルーセルの種類がありますので、さらに詳細に知りたいという方は、Bootstrapのカルーセルコンポーネントの公式ドキュメントをご覧ください。

では、今回は解説は以上です。