pauseオプション
カルーセル（carousel.js）におけるpauseオプションに"hover"を指定すると、カルーセルの要素上にカーソルがあるときは、自動スライドを一時停止する。falseを指定すると、カルーセルの要素上にカーソルがあっても自動スライドを一時停止しない。
属性値一覧表
初期設定値は、"hover"である。
| 属性値 | 説明 |
|---|---|
"hover" |
カルーセルの要素上にカーソルがあるときは、自動スライドを一時停止する。 カルーセルの要素上からカーソルを外すと、自動スライドを再開する。 初期設定値。 |
false |
カルーセルの要素上にカーソルがあっても自動スライドを一時停止しない。 |
data-pause属性に指定
data-pause属性を追加し、"hover"を指定。
ソースコード
<div id="sample2Carousel" class="carousel slide" data-ride="carousel" data-pause="hover">
<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-pause属性を追加し、falseを指定。
ソースコード
<div id="sample3Carousel" class="carousel slide" data-ride="carousel" data-pause="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においてpauseオプションを指定
JavaScriptにおいてpauseオプションにfalseを指定。
ソースコード
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({
pause: false
});
});