Bootstrap 4 のcarouselを使ってWebサイトにスライドショーを作成する

6587 ワード
Bootstrap HTML スライドショー bootstrap4 CSS HTML テキストリンク

Bootstrap 4 のcarouselで作るスライドショー

WEBサイトにスライドショーを作成したい。でもなかなか難しそうだし、どうやってやるかわからない。。そんな人におすすめなのがBootstrap4のcarouselです。ちなみにcarouselは英語でメリーゴーランドって意味です。

実際どんな感じになるの

イメージはこんな感じ。（Bootstrap4の公式サイトから引用）

このスライドショーがなんと、、コピペでできてしまう。あぁBootstrap恐ろしや。

carousel.html

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="2500" data-pause="hover">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item"  style="background-color: yellow;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item"  style="background-color: blue;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </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>

いろんなスライドショーがあるので、興味ある方は公式サイト見て見てね。
https://getbootstrap.com/docs/4.4/components/carousel/

※複数あるclass="carousel-item"のうち、１つはclass="carousel-item active"にしなければならないので注意。

変えられる要素

要素を追加することで、スライドショーをカスタマイズすることができます。

・『interval』で切り替え時間を変える

intervalのdefault設定は5000ミリ秒。
今回は一行目に data-interval="2500"と設定し、2.5秒に1回画面が切り替わるようにしました。

・『pause』でスライドショーを止める

pauseは何かのactionが行われた時に、スライドを止めるもの。
data-pause="hover"を設定すると、hoverされた時にスライドが止まるのです。
読みたいのにどんどん流れて行っちゃうスライドショーってたまにあるよね笑

・『carousel-fade』でオシャレにスライドする

上記のコードではclass="carousel slide"だけなので普通に画面がスライドしていく感じになります。しかし、class="carousel slide carousel-fade"と記載すると、画面がふわっとfadeしながら変わります（表現下手か）

・『ride』で自動スライドか手動スライドか選ぶ

コード内の
data-ride="carousel" → 自動スライド
data-ride="false" → 手動スライド
になります。

ちなみに、Bootstrapを使用する時はheadタグの中に下記いれないと使えないからご注意を。

getstarted.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

全部UdemyのAngelaさんの講座からのメモです。（英語だけどめっちゃわかりやすいです！） → リンク