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

• BootstrapのCarousel
• カルーセルの構造
• キャプションを付ける
• 【実習】カルーセルを作ろう
• コーディング手順

BootstrapのCarousel

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

「With indicators」というテンプレートを使って説明します。

URL：https://getbootstrap.jp/docs/5.3/components/carousel/

カルーセルの構造

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に応じて変更します。

キャプションを付ける

インジケーターの下には、キャプションという項目があります。
これは、スライドする画像の上にテキストを乗せる方法です。

“キャプション”のテンプレートコードをみてみると、基本的な構成はインジケーターと同じことがわかります。
違いは、画像の上に表示されるテキスト（キャプション）の部分だけです。

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

「carousel-caption」の隣に記述されているd-noneとd-md-blockクラス。
２つ並べ書かれているCSSクラスには、以下のような意味があります。

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

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

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

上記説明でも使用した“キャプション”のテンプレートコードを使用します。

【完成見本】

コーディング手順

STEP1．containerクラスのdivを用意

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

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

Bootstrap公式ドキュメントから、キャプションのテンプレートコードをコピー。
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を上書き保存して、ブラウザでカルーセルが出来ているか見てみましょう。
スライドが切り替わるか、インジケーターや前後切り替えのボタンは効くか、確認してください。