在运行时更改引导间隔

Jacques 发表于 Dev

雅克

您可以使用以下代码以特定间隔初始化引导轮播：

$('.carousel').carousel({
    interval: 4000 
});

但是，例如，如果您希望每个幻灯片都有特定的间隔，如何更改该间隔？

我已经将数据间隔属性添加到每张幻灯片的div元素中，如下所示：

<div class="item active" data-interval="7000">
<div class="item active" data-interval="5000">
<div class="item active" data-interval="4000">

我想使用Bootstrap的“ slide”事件根据数据属性值重置间隔。我可以得到的值在那里没有问题，但是我是否仅使用'options'来设置间隔并且它可以工作？

$('.carousel').options.inteval = 10000;

编辑：建议的解决方案不是最佳的
建议以下链接可能是我的问题的答案：bootstrap 3.1传送带上每个项目的幻灯片持续时间不同

用户建议使用超时，这对我来说似乎会导致IE9中的问题。我怀疑这些超时如何潜在影响Bootstrap轮播间隔。结束编辑

雅克

我实际上离我们并不遥远。

$(function ()
{

    $('.carousel').carousel({
        interval: 4000 //set the initial interval
    });

    //handle Bootstrap carousel slide event
    $('.carousel').on("slide.bs.carousel", function (e)
    {
        //get the next interval from the data- HTML attribute
        var interval = parseInt($(e.relatedTarget).data("interval"));

        //set the interval by first getting a reference to the widget
        $('.carousel').data("bs.carousel").options.interval =  interval;
    });
});