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

【问题标题】：How to attach "slide" & "slid" events to the Bootstrap toolkit's carousel?如何将“幻灯片”和“幻灯片”事件附加到 Bootstrap 工具包的轮播？
【发布时间】：2012-03-27 22:21:24
【问题描述】：

这是一个使用 Bootstrap 轮播的小提琴。 http://jsfiddle.net/jeykeu/5TDff/

这里是官方文档，它没有说明事件的使用。 http://twitter.github.com/bootstrap/javascript.html#carousel

我认为这会起作用，但没有：

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

【问题讨论】：

请 +1 github.com/twbs/bootstrap/issues/20792

标签： javascript jquery twitter-bootstrap

【解决方案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/

【讨论】：

当我在我的代码中添加这个时，为什么我得到一个错误'Uncaught SyntaxError: Unexpected token ILLEGAL'有什么帮助吗？
对于任何在这里寻求 BootStrap 3 帮助的人，请尝试以下操作：$('#myCarousel').on('slid.bs.carousel', function () { alert("Slide Event"); })
@c0r3yz 对我来说，现有的 bootstrap 3 似乎可以正常工作，有什么具体的改变吗？
@Gary.S -- 不确定发生了什么变化，只是在 BS3 中不适合我

【解决方案2】：

对于 Bootstrap 3 实现：

活动前

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

活动结束后

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

【讨论】：

@ManicDepression 他们不是slid vs slide
@CsabaToth.. 尝试获取活动指标的索引.. 我做了这样的事情，对我有用 - $(".carousel-indicators li.active").data('slide-to ');您可能需要检查您的指标
@T.Adak 是的，我们可以通过举重来解决它，但直接从框架中获取它会更好
哦，好像有github.com/twbs/bootstrap/pull/21668woohoo的PR

【解决方案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(slide,)。

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

以上是我不喜欢“警报”，在较小的屏幕上显示 console.log 可能会很痛苦。

【讨论】：