Question

我尝试使用一种行为实例化Bootstrap 3轮播，然后在事件上更改该行为。

更具体地说，轮播的初始状态将循环所有幻灯片一次，具有以下内容：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="500" data-wrap="false">

通过以下jQuery，我可以在轮播结束循环后成功触发事件：

$('#carousel-example-generic').on('slid.bs.carousel',function() {
    if($(this).find('.item.active').is(':last-child')) {
        console.log('cycle ended');
    }
});

但是如果我将上面的jQuery更新为：

$('#carousel-example-generic').on('slid.bs.carousel',function() {
    if($(this).find('.item.active').is(':last-child')) {
        $(this).data({
            interval: false,
            wrap: true
        });
    }
});

旋转木马不会更新它的行为。我尝试使用Bootstrap的.carousel()代替.data()来设置初始和更新的选项（没有使用数据属性），但到目前为止还没有任何工作。

这甚至可能吗？如何在轮播已经启动之后更改轮播的行为？

如果有帮助，这里有一个小提琴：http://jsfiddle.net/kvLmmyvm/

Answer 1

我有同样的问题，并在这里找到答案： How to change interval of a bootstrap carousel once it has been initialised

简而言之，您似乎无法设置新选项，但可以找到并编辑现有选项：

var opt = $(this).data()['bs.carousel'].options;
opt.interval = false;
opt.wrap = true;

在链接的答案中，他们将选项明确设置回转盘c.data({options: opt})上，但我发现这不是必需的。

Answer 2

尝试这样：

$('#carousel-example-generic').on('slid.bs.carousel',function() {
    if($(this).find('.item.active').is(':last-child')) {
        $(this).attr('data-wrap', true);
        $(this).attr('data-interval', false);
    }
});

修改

这里是小提琴链接：https://jsfiddle.net/w8mc0cge/

在活动中更改Bootstrap 3 Carousel选项

2 个答案: