wrapオプション ≪ オプション一覧表 ≪ カルーセル ≪ JavaScript ≪ Bootstrap3日本語リファレンス

カルーセル（carousel.js）におけるwrapオプションは、スライドを繰り返し再生させるかどうかを指定出来るオプション。

属性値一覧表繰り返し再生する繰り返し再生しない JavaScriptにおいてwrapオプションを指定

初期設定値は、trueである。

属性値	説明
`true`	最後のスライドまでくると、最初のスライドかに戻り、繰り返し再生する。初期設定値。
`false`	繰り返し再生しない。最後のスライドまでくると、スライドを終了する。

data-wrap属性にtrueを指定。

サンプル

ソースコード

<div id="sample2Carousel" class="carousel slide" data-ride="carousel" data-wrap="true">
	<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-wrap属性にfalseを指定。

サンプル

ソースコード

<div id="sample3Carousel" class="carousel slide" data-ride="carousel" data-wrap="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においてwrapオプションに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({
		wrap: false
	});
});