Bootstrap4移行ガイドを読む(コンポーネント編、カルーセル)
- カルーセルはコンテンツのスライドショー
- CSS 3D変換とJavaScriptで構築されているコンポーネント
- このコンポーネントを動作させるには
util.js
が必要 - カルーセルにはコンテンツを前後するコントロールボタンがオプションでついている
- Bootstrap4のカルーセルは一般にアクセシビリティ基準に準拠してないので注意
- 1つのページで複数のカルーセルを使う場合は
.carousel
にIDを指定する - このコンポーネントの基本型は
<div class="carousel slide" data-ride="carousel">
から始まる - 子要素に
.carousel-inner
、さらにその子要素(ちなみにこれがスライド)に.carousel-item
を持つ .carousel-item
に.active
をつけた要素が一枚目のスライドになる- コンテンツを前後するコントロールボタンは、
.carousel-inner
(と同階層)のあとに.carousel-control-prev
,.carousel-control-next
を指定した要素を置いて表示する - インジケーターもつけることができる。
.carousel-inner
(と同階層)の前に.carousel-indicators
を置いて表示する .carousel-item
内に.carousel-caption
クラスをつけた要素を置くと、スライドにキャプションを付ける