Bootstrapでカルーセル毎に切替時間を設定する(画像が切り替わるタイミングでJavaScriptを実行)

お世話になってます。

Bootstrapのカルーセルで5枚の画像を切り替え表示しています。
1枚目の画像だけ長めに表示したいのですが、うまくいきません。
以下のいずれかについてアドバイスいただきたいです。

・Bootstrap のカルーセルに、各画像へ切替時間を設定する方法はあるか
・JavaScript でカルーセルが切り替わるタイミングを取得することができるか（$(document).ready(function(){・・・}); ではうまくいきませんでした）
・レスポンシブかつ各画像に切替時間を設定することのできるスライダーのご紹介

自分で試してみて、うまくいかなかったことは以下の通りです。

＃carousel に data-interval=6000 のように設定すると、画像の切り替え時間を設定することができるので、この data-interval の値をJavaScriptで切り替えられないかと思い、以下のように記述してみました。

html
1<div id="carousel" class="carousel slide" data-ride="carousel">
2    <ol class="carousel-indicators">
3        <li data-target="#carousel" data-slide-to="0" class="active" id="pic1"></li>
4        <li data-target="#carousel" data-slide-to="1" class="" id="pic2"></li>
5        <li data-target="#carousel" data-slide-to="2" class="" id="pic3"></li>
6        <li data-target="#carousel" data-slide-to="3" class="" id="pic4"></li>
7        <li data-target="#carousel" data-slide-to="4" class="" id="pic5"></li>
8    </ol>
9
10    <div class="carousel-inner">
11    	<div class="item active">
12        	<img src="01.jpg" alt="" width="100%" />
13        </div>
14        <div class="item">
15        	<img src="02.jpg" alt="" width="100%" />
16        </div>
17        <div class="item">
18        	<img src="03.jpg" alt="" width="100%" />
19        </div>
20        <div class="item">
21        	<img src="04.jpg" alt="" width="100%" />
22        </div>
23        <div class="item">
24        	<img src="05.jpg" alt="" width="100%" />
25        </div>
26    </div>
27</div>
28
29<script>
30$(document).ready(function(){
31	if ($("#pic1").hasClass("active")) {
32		$("#carousel").attr('data-interval', '6000');
33	}else{
34		$("#carousel").attr('data-interval', '3000');
35	}
36});
37</script>

上記の記述だと、1枚目の＃pic1に6000をセットしたままになり、他の画像に3000をセットできません。

アドバイスいただきたいです。
どうぞよろしくお願いします。

#追記
kei344様のアドバイスを受け、以下のように修正してみました。

JavaScript
1$(document).ready(function(){
2	$('#carousel').on('slid.bs.carousel', function () {
3		if ($("#pic1").hasClass("active")) {
4			$('#carousel').carousel( { interval: 6000 } );
5		}else{
6			$('#carousel').carousel( { interval: 3000 } );
7		}
8	});
9});
10
11//もしくは
12
13$(document).ready(function(){
14	$('#carousel').on('slid.bs.carousel', function () {
15		if ($("#pic1").hasClass("active")) {
16			$('#carousel').attr('data-interval', '6000');
17		}else{
18			$('#carousel').attr('data-interval', '3000');
19		}
20	});
21});

どちらの書き方でも指定した秒数が反映されず、デフォルトの5000が効いてしまっているようでした。
２つめの書き方の場合、画像が切り替わるたびにdata-intervalに値がセットされているのは確認できましたが、やはり効いてはいませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

イベント slid.bs.carousel で切り替わりを捉えられそうです。

JavaScript
1$( '#carousel' ).on( 'slid.bs.carousel', function() {
2    if ( $( '#pic1' ).hasClass( 'active' ) ) {
3        $( '#carousel' ).carousel( { interval: 6000 } );
4    }else{
5        $( '#carousel' ).carousel( { interval: 3000 } );
6    }
7});

【Bootstrap3 スライダーとCarouselの簡単な使い方】
http://designup.jp/bootstrap3-carousel-193/

【Bootstrap JS Carousel Reference】
http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

追記：

pause/cycle が一時停止/再開ならこう書けるかも。

JavaScript
1$( '#carousel' ).on( 'slid.bs.carousel', function() {
2    if ( $( '#pic1' ).hasClass( 'active' ) ) {
3        setTimeout( function() {
4            $('#carousel').carousel( 'cycle' );
5        }, 6000 );
6        $('#carousel').carousel( 'pause' );
7    }
8});