カルーセルの作り方
前置き
bootstrapでカルーセルを作成する方法を調べたので残しておきます。
恒例の自分用のメモです。
カルーセルとは
画像が自動で横スライドしていくような表示のことです。
カルーセルの階層構造
>>は1階層したを表します。
>>>>であれば2階層下ですね。
div.carousel .slide(data-ride="carousel)
>>div.carousel-inner
>>>>div.carousel-item
>>>>div.carousel-item
.......
ご覧の通り、3層構造になっています。
一番下のdiv.carousel-itemが、実際にスライドする部分になります。
カルーセルのカスタマイズ
カルーセルには、以下のカスタマイズが可能です。
- コントロール
- インジケーター
- キャプション
- 間隔
コントロール
carousel-itemの左右についている矢印や三角形のことです。
押すとアイテムが切り替わるやつですね。
コントロールを表示する場合の階層構造は次のようになります。
カルーセル全体の構造
div.carousel .slide
>>div.carousel-inner
>>>>div.carousel-item
>>a.carousel-control-prev href="div.carouselのid" role="button" data-slide="prev"
>>>>span.carousel-control-prev-icon aria-hidden="true"
>>>>span.sr-only(text: Previous")
# ボタン全体はa要素で作成。
# ボタンはdiv.carousel-innerの外側に作る。
# カルーセルを一つ進めるボタンは、上記のprevをnextに置き換える。
インジケータ
インジケータは、今表示されているアイテムが何番目かを表すものですね。
カルーセルの階層構造
div.carousel .slide
>>div.carousel-inner
>>>>div.carousel-item
>>ol.carousel-indicators
>>>>li data-target="div.carouselのid" data-slide-to="x"
# xは0から始めて、カルーセルアイテムの数だけ作成します。
# また、liのうち最初にアクティブにしておきたいものにはclass="active"を与えます。
キャプション
説明文のことですね。
>>>>div.carousel-item
>>>>>>div.carousel-caption
わかりやすいですね。
他のオプションアイテムとは異なり、carousel-itemの中に入れることに注意しましょう。
間隔
カルーセルの表示が切り替わる間隔を指定することもできます。
表示の切り替えは、htmlのheadの部分にscriptタグを記述することで行います。
<script type="text/javascript">
$('.carousel').carousel({
interval: 1000
})
</script>
または、carousel-itemのdata-interval属性を用いて設定することも可能です。
個別に設定したい場合はこちらになります。
data-interval="100"