Bootstrap 4 のcarouselで作るスライドショー
WEBサイトにスライドショーを作成したい。でもなかなか難しそうだし、どうやってやるかわからない。。そんな人におすすめなのがBootstrap4のcarouselです。ちなみにcarouselは英語でメリーゴーランドって意味です。
実際どんな感じになるの
イメージはこんな感じ。（Bootstrap4の公式サイトから引用）
このスライドショーがなんと、、コピペでできてしまう。あぁBootstrap恐ろしや。
<divid="carouselExampleControls"class="carousel slide"data-ride="carousel"data-interval="2500"data-pause="hover"><divclass="carousel-inner"><divclass="carousel-item active"style="background-color: red;"><imgsrc="..."class="d-block w-100"alt="..."></div><divclass="carousel-item"style="background-color: yellow;"><imgsrc="..."class="d-block w-100"alt="..."></div><divclass="carousel-item"style="background-color: blue;"><imgsrc="..."class="d-block w-100"alt="..."></div></div><aclass="carousel-control-prev"href="#carouselExampleControls"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselExampleControls"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="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タグの中に下記いれないと使えないからご注意を。
<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">