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を上書き保存して、ブラウザでカルーセルが出来ているか見てみましょう。 スライドが切り替わるか、インジケーターや前後切り替えのボタンは効くか、確認してください。
カルーセルに使う画像について
カルーセルのテンプレートコードを使うと、使用する画像には全てmax-width: 100%; が適用されます。
しかし、別途cssで設定しない限り、画像の高さは揃えてくれません。
例えば、スライド表示する画像の一枚を「a.jpg」に置き換えてみてください。
そうすると、高さが揃わずに、切り替えの時にガタガタした動きになるはずです。これでは統一感が無く見にくいですよね。
カルーセルに入れる画像を用意するときには、同じ大きさの画像を使用するのがベストです。