2021/08/17

Bootstrp5のスライドショーにスライド番号をつける

Bootstarpのスライドショーによくある 1 / 5 みたいなスライドショーの全個数と、今のスライド番目を出したかったのでメモ。公式に既にイベントとプロパティについて説明があったのでサクッと作ることができました。
Bootstrap5と書いていますが、構造やイベントが4と変わらないので4でも使えると思います。

See the Pen 210817_bootstrap5でスライドショーにスライド番号をつける by nekuta (@nekuta) on CodePen.

カルーセルのスライド遷移が完了したときのイベント

const carouselExampleControls = document.getElementById('carouselExampleControls');

// 〜中略〜

//カルーセルのスライド遷移が完了したときのイベント
carouselExampleControls.addEventListener('slide.bs.carousel',  (e) =>  {
  //ここに処理
});


//jQuery使うなら
$('#carouselExampleControls').on('slide.bs.carousel',  (e) => {
  //ここに処理
});

公式リファレンスにイベントについて掲載されています。（https://getbootstrap.jp/docs/5.0/components/carousel/#events）

また、イベント内で下記のプロパティを取得することができます。

direction: カルーセルがスライドする方向（「左」または「右」のいずれか）。
relatedTarget: アクティブなアイテムとしてスライドされている DOM 要素。
from: 現在のアイテムのインデックス
to: 次の項目のインデックス
Carousel (カルーセル) · Bootstrap v5.0