Bootstrap5のカルーセルを理解する【図解たっぷりBootstrap5入門】

• BootstrapのCarousel
• 【実習】カルーセルを作ろう

BootstrapのCarousel

様々なサイトで、画像がスライドショーのように表示されるのを見た事があるかと思います。
この画像切り替え機能、Bootstrapでは「カルーセル（Carousel）」という名前でテンプレートが用意されています。

「With indicators」というテンプレートを使って説明します。
https://getbootstrap.jp/docs/5.0/components/carousel/#with-indicators

カルーセルの構造

With indicatorsのテンプレートコードの構造を見てみましょう。
大まかには、4パート（枠1つ+カルーセルのパーツ3つ）に分かれています。

1.枠組み

まず、一番上にある<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">とその閉じタグ。
これは簡単に言えば「ここからカルーセルを作るよ！」という指示です。

idの部分はBootstrapで決められたものではありません。
お好きにid名を付けることができますが、id指定が必要な箇所（上図、黄色でハイライトした箇所）があります。id名を揃えないと、カルーセルが正常に動かなくなるため注意しましょう。

2.インジケーター

次に、<div class="carousel-indicators">部分です。
ここは、カルーセルの下部に表示されているインジケーターを作るコードです。

3つ並んでいる長方形が、それぞれbuttonタグで作成されています。

buttonタグの中に１つだけ「active」というCSSクラスが適用されている箇所が、1枚めに表示される画像部分になります。
並んでいる長方形で、白色がはっきりしているところがactive（現在のスライド）です。

3.スライド部分

<div class="carousel-inner">の中身は、スライドで切り替わる部分です。

1スライドずつが<div class="carousel-item">でまとめられています。
<div class="carousel-item">の中に１つだけ「active」というCSSクラスが適用されている箇所がありますね。

「active」クラスが指定されている部分が、1枚目に表示される画像部分になります。
どのスライドにも「active」クラスがないと、他のコードに問題がなくてもカルーセルが表示されませんので注意してください。

4枚目、5枚目…とスライドの数を増やしたい場合は<div class="carousel-item">～</div>までを増やします。

加えて、インジケーター付きの場合は、2で解説したインジケーターのbuttonタグも増やす必要があります。
そして「data-bs-slide-to=2」の数字の部分に「総画像枚数ー１」の数字を入れます。
これは、カウントが０から始まっている為です。

4.前後切り替えボタン

最後に、下部にある２つの<button>タグ部分。

これはスライドを前、後ろに切り替えるボタンを作るためのコードです。
黄色でハイライトしている data-bs-target の中の「#carouselExampleIndicators」は、カルーセルのidに応じて変更します。

キャプションを付ける

スライドする画像の上にテキストを乗せる方法です。
「With captions」のテンプレートコードを使って説明します。

Carousel-https://getbootstrap.jp/docs/5.0/components/carousel/#with-captions

コードをみてみると、With indicatorsと基本的な構成は一緒であることがわかります。

キャプションは、スライド表示させる画像（imgタグ）の下に記述されています。
「carousel-caption」というCSSクラスを追加することで、キャプション部分がカルーセル画像下部に重なって表示されるようにBootstrapが設定してくれています。

「carousel-caption」の隣に記述されている「d-none」と「d-md-block」。共通している「d」は「display」を意味しています。

２つ並べ書かれているCSSクラスには、以下のような意味があります。

• キャプション部分をdisplay: none;にする（表示させない）
• 画面サイズがMedium以上ならdisplay: block;にする（表示させる）

【実習】カルーセルを作ろう

「carousel.html」というhtmlファイルを作成し、カルーセルを動かしてみましょう。
素材のimagesフォルダ内にある、food1~3.jpgをスライド切り替えで表示させてみます。

テンプレートコードは上記説明「キャプション付き」でも使用したWith captionsを使用します。

【完成見本】

コーディング手順

STEP1．containerクラスのdivを用意

そのままテンプレートコードのみを張り付けると、横に広がりすぎます。
カルーセル全体を囲うための<div class="container">を作ってください。

STEP2．With captionsのテンプレートコードをコピー＆ペースト

Bootstrapサイトから、With captionsのテンプレートコードをコピー。
1で作った<div class="container">の中にペーストしてください。

STEP3．imgタグに、それぞれ画像パスを入れる
Bootstrapサイトからコピーしてきた時点では、画像タグは「img src=...」と空っぽです。
それぞれimagesフォルダ内にあるfood1.jpg, food2.jpg, food3.jpgを表示させるよう、パスを書き換えましょう。

STEP4．carousel-captionの見出しを変更する
<div class="carousel-caption">の中にある、h5タグ内を打ち替えてください。
それぞれ、画像の名前と連動して「FOOD1」「FOOD2」「FOOD3」という見出しにします。

STEP5．ブラウザで表示と動作を確認する
htmlを上書き保存して、ブラウザでカルーセルが出来ているか見てみましょう。
スライドが切り替わるか、インジケーターや前後切り替えのボタンは効くか、確認してください。