フレームワークBootstrapのカルーセルパネルの使い方Bootstrapに用意されているカルーセルパネルを利用すれば、簡単にスライドイメージを作ることができます。それでは、カルーセルパネルの設置方法について見ていきましょう。カルーセルパネルの設置方法Bootstrapのカルーセルパネルはいくつかの種類が用意されています。単純に画像をスライドさせたい場合の設置の仕方は以下のように作ります。</div></div>まず、「carouselExampleSlidesOnly」というidのついたボックスを作ります。このボックスに「slide」というクラスをつけることで画像がスライドするようになります。あとは、「carousel-item」というクラスをつけたボックスをスライドさせたい枚数分だけ作り、最初の1枚に「active」というクラスを付与します。「carousel-inner」というボックスで囲ってあげればスライダーの完成です。img要素についている「w-100」というクラスは画像を100%表示にするためのクラスなので、必要に応じてつけれるようにします。次の画像、前の画像へスライドさせるコントロールボタンをつけたい場合は以下のように作ります。</a></div>まず、1番外枠のボックスのidを「carouselExampleControls」にします。画像の配置に関してはスライドのみのときと同じボックスです。a要素を使ってコントロールボタンを左右に配置します。1番外枠のボックスについている「carousel」というクラスでコントロールボタンを表示させています。以上が、Bootstrapのカルーセルパネルの使い方となります。