Question

我正在使用Bootstraps carousel（Bootstrap v3.3.4）和这个名为bootstrap-touch-carousel（https://github.com/ixisio/bootstrap-touch-carousel）的插件来使我的内容可以浏览。

我面临的问题是，当我使用它来刷我的内容时，它会禁用项目中的所有可点击元素（链接，输入等）。我已经尝试使用代码手动重新附加事件处理：

$( "#myCarousel" ).bind( "touchend", function() { /*code for specific element*/});

但这是分配工作，所以我想尝试只使字幕可以转换，我已将我的内容放在可转换项目之外，并且我试图使用活动的特定项目使内容可见。为此，我需要检测用户何时滑动到下一个或上一个项目。我已经尝试过代码了：

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


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

$('#myCarousel').bind('slide', function (e) {
    console.log('slide event!');
});

$('#myCarousel').bind('slid', function (e) {
    console.log('slide event!');
});

我也尝试过而不是绑定但似乎没有任何效果。似乎无法检测到幻灯片事件。

我怀疑使用bootstrap-touch-carousel它会以另一种方式滑动，但我不知道如何检测用户何时进入下一张或上一张幻灯片。有没有办法做到这一点？或者也许是一种使旋转木马滑动功能起作用的方法？

Answer 1

将代码放置在document.ready函数中，如下所示：

$( document ).ready(function() {
    console.log( "ready!" );
    // My code goes here!
});

这将延迟代码执行，以确认代码在加载任何依赖项之前未运行。

如何检测Bootstrap轮播幻灯片更改？

1 个答案: