メソッド Methods
カルーセル（carousel.js）におけるメソッド。
メソッド一覧表
| メソッド名 | 説明 |
|---|---|
| cycle |
左から右へのスライドで、スライド項目を順に表示する。 |
| pause |
スライドを停止する。 |
| number |
数値で指定したスライド項目に移動する。 0から始まる連番である点に注意。１つ目のスライド項目は、 0、２つ目のスライド項目は、1となる。
|
| prev |
前のスライド項目に移動する。 |
| next |
次のスライド項目に移動する。 |
サンプル
ソースコード
HTML
<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> <li data-target="#sampleCarousel" data-slide-to="3"></li> <li data-target="#sampleCarousel" data-slide-to="4"></li> <li data-target="#sampleCarousel" data-slide-to="5"></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 class="item"> <img src="../img/sampleD-1140x500.png" alt="Fourth slide"> </div> <div class="item"> <img src="../img/sampleE-1140x500.png" alt="Fifth slide"> </div> <div class="item"> <img src="../img/sampleF-1140x500.png" alt="Sixth 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> <br> <p> <button type="button" id="sampleCarouselCycle" class="btn btn-default">cycle</button> <button type="button" id="sampleCarouselPause" class="btn btn-default">pause</button> <button type="button" id="sampleCarouselPrev" class="btn btn-default">prev</button> <button type="button" id="sampleCarouselNext" class="btn btn-default">next</button> </p> <p> <button type="button" class="btn btn-default sampleCarouselNumber" value="0">１</button> <button type="button" class="btn btn-default sampleCarouselNumber" value="1">２</button> <button type="button" class="btn btn-default sampleCarouselNumber" value="2">３</button> <button type="button" class="btn btn-default sampleCarouselNumber" value="3">４</button> <button type="button" class="btn btn-default sampleCarouselNumber" value="4">５</button> <button type="button" class="btn btn-default sampleCarouselNumber" value="5">６</button> </p>
JavaScript
$(function () {
$('#sampleCarouselCycle').click(function () {
$('#sampleCarousel').carousel('cycle');
});
$('#sampleCarouselPause').click(function () {
$('#sampleCarousel').carousel('pause');
});
$('#sampleCarouselPrev').click(function () {
$('#sampleCarousel').carousel('prev');
});
$('#sampleCarouselNext').click(function () {
$('#sampleCarousel').carousel('next');
});
$('.sampleCarouselNumber').click(function () {
var $val = new Number($(this).val()).valueOf();
$('#sampleCarousel').carousel($val);
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。