説明文付きスライド ≪ カルーセル ≪ JavaScript ≪ Bootstrap3日本語リファレンス

カルーセルcarousel.jsにおける各スライド項目に説明文を付ける方法。

全体をdiv要素で括り、id属性を指定する。
スライド群をdiv要素で括り、class属性にcarousel-innerを指定する。
各スライド項目をdiv要素で括り、class属性にitemを指定する。最初に表示したいスライド項目のclass属性にactiveを追加する。
３のdiv要素内に、画像（img要素）を配置する。
３のdiv要素内に、class属性にcarousel-captionを指定したdiv要素を配置する。
５のdiv要素内に、説明文を配置する。HTMLタグなども使える。

サンプル

ソースコード

<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 class="carousel-caption">
				<h2>サンプル画像１</h2>
				<p>１つ目のサンプル画像です。</p>
			</div>
		</div>
		<div class="item">
			<img src="../img/sampleB-1140x500.png" alt="Second slide">
			<div class="carousel-caption">
				<h2>サンプル画像２</h2>
				<p>２つ目のサンプル画像です。</p>
			</div>
		</div>
		<div class="item">
			<img src="../img/sampleC-1140x500.png" alt="Third slide">
			<div class="carousel-caption">
				<h2>サンプル画像３</h2>
				<p>３つ目のサンプル画像です。</p>
			</div>
		</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>