intervalオプション
カルーセル（carousel.js）におけるintervalオプションは、スライドとスライドの時間の間隔を指定するオプション。
属性値一覧表
初期設定値は、5000である。
| 属性値 | 説明 |
|---|---|
| 数値 | ミリ秒単位の数値で指定する。 |
false |
自動的にスライドしない。 |
data-interval属性に指定
data-interval属性を追加し、3000を指定。
ソースコード
<div id="sample2Carousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li class="active" data-target="#sample2Carousel" data-slide-to="0"></li>
<li data-target="#sample2Carousel" data-slide-to="1"></li>
<li data-target="#sample2Carousel" 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="#sample2Carousel" 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="#sample2Carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">次へ</span>
</a>
</div>
自動スライドを無効化
data-interval属性を追加し、falseを指定。
ソースコード
<div id="sample3Carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li class="active" data-target="#sample3Carousel" data-slide-to="0"></li>
<li data-target="#sample3Carousel" data-slide-to="1"></li>
<li data-target="#sample3Carousel" 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="#sample3Carousel" 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="#sample3Carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">次へ</span>
</a>
</div>
JavaScriptにおいてintervalオプションを指定
ソースコード
HTML
<div id="sample4Carousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active" data-target="#sample4Carousel" data-slide-to="0"></li> <li data-target="#sample4Carousel" data-slide-to="1"></li> <li data-target="#sample4Carousel" 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="#sample4Carousel" 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="#sample4Carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">次へ</span> </a> </div>
JavaScript
$(function () {
$('#sample4Carousel').carousel({
interval: 2000
});
});