Bootstrap3
日本語リファレンス

広告

pauseオプション


カルーセル(carousel.js)におけるpauseオプションに"hover"を指定すると、カルーセルの要素上にカーソルがあるときは、自動スライドを一時停止する。falseを指定すると、カルーセルの要素上にカーソルがあっても自動スライドを一時停止しない。


初期設定値は、"hover"である。

属性値 説明
"hover" カルーセルの要素上にカーソルがあるときは、自動スライドを一時停止する。
カルーセルの要素上からカーソルを外すと、自動スライドを再開する。
初期設定値。
false カルーセルの要素上にカーソルがあっても自動スライドを一時停止しない。

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オプションに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
	});
});

広告
広告