インディケータでスライド項目を切り替え ≪ カルーセル ≪ JavaScript ≪ Bootstrap3日本語リファレンス

スライド項目を切り替えられるインディケータ付きカルーセル。

全体をdiv要素で括り、id属性を指定する。
スライド群をdiv要素で括り、class属性にcarousel-innerを指定する。
各スライド項目をdiv要素で括り、class属性にitemを指定する。最初に表示したいスライド項目のclass属性にactiveを追加する。
３のdiv要素内に、画像などのスライド項目を配置する。
class属性にcarousel-indicatorsを指定したol要素を、１のdiv要素の子要素として配置する。
５のol要素内に、li要素を配置する。li要素のdata-target属性にカルーセルのid属性値を#に続けて指定する。li要素のdata-slide-to属性に、スライドを識別するための、0始まる連番を指定する。最初に表示するスライドの連番を指定したli要素のclass属性にactiveを指定する。

サンプル

ソースコード

<div id="sampleCarousel" class="carousel slide" data-ride="carousel">
	<ol class="carousel-indicators">
		<li class="active" data-target="#sampleCarousel" data-slide-to="0"></li>
		<li data-target="#sampleCarousel" data-slide-to="1"></li>
		<li data-target="#sampleCarousel" 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>
</div>