如何將“幻燈片”和“滑動”事件附加到Bootstrap工具包的輪播？

Question

這是一個工作Bootstrap旋轉木馬的小提琴。 http://jsfiddle.net/jeykeu/5TDff/

這里是官方文檔，它沒有說明事件的使用情況。 http://twitter.github.com/bootstrap/javascript.html#carousel

我認為這會有效但不是：

     $('#carousel').bind('slide',function(){
            alert("Slide Event");
    });

Answer 1

基於你的小提琴#carousel錯了。 它應該是#myCarousel 。

更新示例：

$('#myCarousel').carousel({
    interval: 2000
});

// Could be slid or slide (slide happens before animation, slid happens after)
$('#myCarousel').on('slid', function() {
    alert("Slide Event");
});​

http://jsfiddle.net/infiniteloops/wPF3n/

使用Bootstrap 3

http://jsfiddle.net/infiniteloops/wPF3n/252/

Answer 2

對於Bootstrap 3實現：

活動前

$('#myCarousel').bind('slide.bs.carousel', function (e) {
       console.log('before');
});

事后

$('#myCarousel').bind('slid.bs.carousel', function (e) {
       console.log('after');
});

Answer 3

老帖子我知道，但我想用.on函數顯示幻燈片和滑動。

所以，我的2美分...... JSFiddle

$('#myCarousel').on('slide.bs.carousel', function (e) {
    $( '.carousel' ).removeClass('color-start');
    $( '.carousel' ).addClass('color-finish');
    $('#bind').html('Sliding!');
});

$('#myCarousel').on('slid.bs.carousel', function (e) {
    $( '.carousel' ).removeClass('color-finish');
    $( '.carousel' ).addClass('color-start');
    $('#bind').html('slid again!');
});

'addClass＆removeClass'用於顯示正在發生的事情以及何時發生。 此外，您可以將此與animate.css一起使用，以將“動畫”類添加到元素.on（幻燈片）。

$('#bind').html('Sliding!')

以上是我不喜歡'警報'並顯示console.log可能是較小的屏幕上的痛苦。