Bootstrap5.1.3 のCarouselの制御

Bootstrap

もくじ

簡単なカルーセルの制御方法

自動再生させない

「次へ送る」「前へ戻る」ボタンを押したときや、スライドを動かしたらそのまま自動再生がはじまらないようにするには、data-bs-pause="true" を追加する。

// 例:次へ送るボタン
<button aria-label="Prev Slide" data-bs-target="#exampleCarousel" data-bs-slide="prev" data-bs-pause="true"></button>

再生ボタン、停止ボタンの追加

ボタンを押すとスライドが再生されるようにするには、data-bs-ride="true" を追加する。ボタンを押すと止まるようにするには、data-bs-slide="pause" を追加する

// 例:再生ボタン
<button aria-label="Play automatic slide show" data-bs-target="#exampleCarousel" data-bs-target="#exampleCarousel" data-bs-ride="true" data-bs-slide="cycle"></button>
// 例:停止ボタン
<button aria-label="Stop automatic slide show" data-bs-target="#exampleCarousel" data-bs-target="#exampleCarousel" data-bs-slide="pause"></button>