on( events, fn )メソッドを使う場合。

$( セレクター ).on( イベント, function () {
	// 処理
} );

セレクターでカルーセルを選択。

イベントに指定できるのは、slide.bs.carousel、slid.bs.carousel。

slide.bs.carousel:

slid.bs.carousel:

前へ 次へ

HTML

<p>slide.bs.carousel: <span id="slideBsCarousel"></span></p>
<p>slid.bs.carousel: <span id="slidBsCarousel"></span></p>
<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="http://bootstrap3.cyberlab.info/img/sample-1140x500.png" alt="First slide">
		</div>
		<div class="item">
			<img src="http://bootstrap3.cyberlab.info/img/sampleB-1140x500.png" alt="Second slide">
		</div>
		<div class="item">
			<img src="http://bootstrap3.cyberlab.info/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>

JavaScript

$(function () {
	var $slideCounter = 0;
	var $slidCounter = 0;
	$('#sampleCarousel').on('slide.bs.carousel', function () {
		$('#slideBsCarousel').text( ++$slideCounter + "回slideメソッドを呼び出しましたね。" );
	});
	$('#sampleCarousel').on('slid.bs.carousel', function () {
		$('#slidBsCarousel').text( ++$slidCounter + "回目のスライド完了。" );
	});
});

このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。