Bootstrapに用意されているカルーセルパネルを利用すれば、簡単にスライドイメージを作ることができます。それでは、カルーセルパネルの設置方法について見ていきましょう。

カルーセルパネルの設置方法

Bootstrapのカルーセルパネルはいくつかの種類が用意されています。

スライドのみ使う場合

単純に画像をスライドさせたい場合の設置の仕方は以下のように作ります。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="photo1.jpg" alt="">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="photo2.jpg" alt="">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="photo3.jpg" alt="">
    </div>
  </div>
</div>

まず、「carouselExampleSlidesOnly」というidのついたボックスを作ります。そして、このボックスに「slide」というクラスをつけることで画像がスライドするようになります。あとは、「carousel-item」というクラスをつけたボックスをスライドさせたい枚数分だけ作り、最初の1枚に「active」というクラスを付与します。そして、「carousel-inner」というボックスで囲ってあげればスライダーの完成です。img要素についている「w-100」というクラスは画像を100％表示にするためのクラスなので、必要に応じてつけれるようにします。

コントロールをつけたい場合

次の画像、前の画像へスライドさせるコントロールボタンをつけたい場合は以下のように作ります。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    ～画像エリア～
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

まず、1番外枠のボックスのidを「carouselExampleControls」にします。画像の配置に関してはスライドのみのときと同じボックスです。そして、a要素を使ってコントロールボタンを左右に配置します。1番外枠のボックスについている「carousel」というクラスでコントロールボタンを表示させています。

以上が、Bootstrapのカルーセルパネルの使い方となります。

おすすめの記事