カルーセル carousel.js
スライドショーのように、コンテンツを順に表示するJavaScript。
使い方
- 全体を
div要素で括り、id属性を指定する。 - スライド群を
div要素で括り、class属性にcarousel-innerを指定する。 - 各スライド項目を
div要素で括り、class属性にitemを指定する。最初に表示したいスライド項目のclass属性にactiveを追加する。 - ３の
div要素内に、画像などのスライド項目を配置する。 - インディケータでスライド項目を切り替えられるようにする場合は、
class属性にcarousel-indicatorsを指定したol要素を、１のdiv要素の子要素として配置する。 - カルーセルの左側をクリックすることで、前のスライド項目に戻れるようにする場合は、
class属性にleft carousel-controlを指定したa要素を、１のdiv要素の子要素として配置する。data-slide属性を追加し、prevを指定する。href属性には、カルーセルのid属性値を#に続けて指定する。 - カルーセルの右側をクリックすることで、次のスライド項目に進めるようにする場合は、
class属性にright carousel-controlを指定したa要素を、１のdiv要素の子要素として配置する。data-slide属性を追加し、nextを指定する。href属性には、カルーセルのid属性値を#に続けて指定する。
ソースコード
<div id="sampleCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active" data-target="#sampleCarousel" data-slide-to="0"></li> <li data-target="#sampleCarousel" data-slide-to="1"></li> <li data-target="#sampleCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="../img/sample-1140x500.png" alt="First slide"> </div> <div class="item"> <img src="../img/sampleB-1140x500.png" alt="Second slide"> </div> <div class="item"> <img src="../img/sampleC-1140x500.png" alt="Third slide"> </div> </div> <a class="left carousel-control" href="#sampleCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">前へ</span> </a> <a class="right carousel-control" href="#sampleCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">次へ</span> </a> </div>