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

記事内に商品プロモーションを含む場合があります

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

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

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

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

Bootstrapのカルーセルの種類

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

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

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

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

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

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

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

カルーセルのみ

1. <div class=”container”>
2.       <div 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>
11.       </div>
12.     </div>

 

注意点としては、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のカルーセルコンポーネントの公式ドキュメントをご覧ください。

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