Bootstrap5｜JavaScriptコンポーネント「カルーセル」を使ってみた

記事

コラム

はじめに

Bootstrap5 には、複数の画像やコンテンツをスライド形式で切り替えて表示できる「カルーセル」というコンポーネントがあります。

写真ギャラリーや商品紹介など、視覚的に情報を伝えたい場面でとても便利な UI です。

今回は、実際にカルーセルを触りながら、使い方や気づいたポイントをまとめてみました。

カルーセルは、複数の画像やテキストを順番に切り替えて表示するスライダー UI のことです。

Bootstrap5 では、必要なクラスを HTML に追加するだけで簡単に動作し、自動再生・前後ボタン・インジケーターなども標準で利用できます。

スマートフォンでも自然に表示されるため、レスポンシブなサイト制作と相性が良いコンポーネントです。

カルーセルは、次のような場面で活用できます。

・写真ギャラリーのスライド表示

・制作実績やポートフォリオの紹介

・商品画像の切り替え表示

・トップページのヒーローヘッダー

特に、限られたスペースで複数の画像を見せたいときに効果的です。

以下は、4枚の画像（朝・昼・夕・夜の町の風景）をスライド表示する最小構成の例です。

</div>

</div>

</div>

</div>

</button>

</button>

</div>

このコードを貼るだけで、4枚の画像が自動で切り替わるカルーセルが動作します。

画像サイズは横幅いっぱいに表示され、スマートフォンでも自然に見えるレイアウトになります。

※ココナラのブログでは外部の CSS / JavaScript を読み込めないため、

Bootstrap のカルーセルはスライド動作しません。

画像は静止表示になりますが、コード自体はそのまま利用できます。

実際にカルーセルを試してみると、次のような気づきがありました。

・画像の切り替わりが自然で、視覚的にとてもわかりやすい

・HTML とクラス指定だけで動くため、実装がとても簡単

・画像サイズや比率を揃えると見栄えが大きく向上する

・4枚程度だとテンポよく切り替わり、閲覧しやすい

特に、写真ギャラリーや制作実績の紹介に使うと、サイト全体の印象がぐっと良くなると感じました。

カルーセルは、Bootstrap5 の中でも視覚的な効果が高く、使いやすいコンポーネントだと感じました。

画像をスライド表示するだけでサイトの印象が大きく変わり、スマホとの相性も良いため、今後の制作でも積極的に活用していきたい UI です。

シンプルな構成でも十分に見栄えがするので、写真や制作実績を紹介したい場面で特におすすめです。