nlog

とめどなく流れるよだれ

Bootstrap4移行ガイドを読む(コンポーネント編、カルーセル)

カルーセル - 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 クラスをつけた要素を置くと、スライドにキャプションを付ける