【Bootstrap】 Carouselの書き方

みなさんこんにちは さくちゃん です。

本日は「Carousel」の書き方について紹介していきます。
では早速やっていきましょう！

Carouselの書き方

Carouselとは？

そもそもCarouselとは何か？と言うと回転台、回転木馬などを意味します。ここで言う「Carousel」は、写真やコンテンツなどを横にスライドさせながら表示できるものを言います。

Bootstrapでは、下の写真のようなものが作成できます。

本来であればJavaScriptなどを使ってスライドさせるのですが、このようにBootstrapだけで簡単に作ることができます。

すごいですね、Bootstrap。

公式サイトの確認

では、公式サイトを確認していきましょう。

公式サイトのタブの「Documentation」をクリックします。

次に左サイドバーの「Components」をクリックします。

そして「Components」の中の「Carousel」をクリックすると参照できます。

基本的な書き方

基本的な書き方は下のようになります。

<div class="carousel slide" data-ride="carousel" style="width:400px">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="..." alt="Third slide">
    </div>
  </div>
</div>

だいたい５秒間隔でスライドが切り替わります。

書き方はシンプルで、

1. 「class=”carousel slide”」でCarouselであることを宣言します。
2. 「data-ride=”carousel”」で自動的にスライドさせるようにします。
3. 「class=”carousel-inner”」でスライドさせる写真をこの中に書いて行きます。
4. 「class=”carousel-item”」でスライドさせる写真を追加します。

と書いて行きます。
すると下のようなスライドが作成できます。

その他にも、アイコンを表示させてスライドさせる方法もあります。
書き方は、上のコードに下のコードを追加するだけです。

<div id="carousel" class="carousel slide" data-ride="carousel" style="width:100%">

〜省略〜

<a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

ここで注意することは、先ほどは「id」を指定しなくてもよかったのですが、ここでは、「アイコンをクリックするとスライドさせる」ため、「id」を指定する必要があります。

「id」を指定する場所は「class=”carousel slide”」の部分に「id」を指定します。
id名はなんでも構いませんが、一度しか使用できないので、注意しましょう。

うまく反映されると下のようになります。

まとめ

公式サイトには、今回紹介した内容以外にも色々あります。
よければ一度、公式サイトを確認してみるといいです。

では本日は以上になります。