如何将“幻灯片”和“滑动”事件附加到Bootstrap工具包的轮播？

这是一个工作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可能是一个小屏幕上的痛苦。