前後のスライド項目へ戻る進む ≪ カルーセル ≪ JavaScript ≪ Bootstrap3日本語リファレンス

カルーセルの左側をクリックすることで、前のスライド項目に戻り、カルーセルの右側をクリックすることで、次のスライド項目に進むようにする方法。

全体をdiv要素で括り、id属性を指定する。
スライド群をdiv要素で括り、class属性にcarousel-innerを指定する。
各スライド項目をdiv要素で括り、class属性にitemを指定する。最初に表示したいスライド項目のclass属性にactiveを追加する。
３のdiv要素内に、画像などのスライド項目を配置する。
カルーセルの左側をクリックすることで、前のスライド項目に戻れるようにするには、class属性にleft carousel-controlを指定したa要素を、１のdiv要素の子要素として配置する。data-slide属性を追加し、prevを指定する。href属性には、カルーセルのid属性値を#に続けて指定する。
カルーセルの右側をクリックすることで、次のスライド項目に進めるようにするには、class属性にright carousel-controlを指定したa要素を、１のdiv要素の子要素として配置する。data-slide属性を追加し、nextを指定する。href属性には、カルーセルのid属性値を#に続けて指定する。

サンプル

ソースコード

<div id="sampleCarousel" class="carousel slide" data-ride="carousel">
	<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="#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>