カルーセルの作り方

前置き

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"