在运行时更改引导间隔答案

【问题标题】：Change Bootstrap Interval at runtime在运行时更改引导间隔
【发布时间】：2014-12-01 13:48:45
【问题描述】：

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

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

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

我为每张幻灯片的 div 元素添加了 data-interval 属性，如下所示：

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

使用 Bootstrap 的 'slide' 事件，我想根据 data- 属性值重置间隔。我可以得到的值所以那里没有问题，但是我只是使用“选项”来设置间隔并且它会起作用吗？

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

编辑：建议的解决方案不是最优的
有人建议以下链接可能是我的问题的答案：Different slide duration for each item on bootstrap 3.1 carousel

用户建议使用超时，这对我来说似乎会导致 IE9 出现问题。我怀疑这些超时如何潜在地干扰 Bootstraps 轮播间隔存在问题。 结束编辑

【问题讨论】：

看看这个帖子：stackoverflow.com/questions/23300199/…
你的想法试过了吗？成功了吗？
@DLeh 是的，我得到以下信息：TypeError: $(...).options is undefined
@brothers28 我认为该帖子是我们目前实际得到的，但它会在 IE9 中引起一些严重的问题，而这正是我现在正在尝试解决的问题。那篇文章的问题在于它使用了 setTimeout，这不会干扰轮播自己的计时器/间隔吗？
@Jacques 你能不能暂停轮播然后使用当前幻灯片的超时时间并在超时触发时调用下一张幻灯片

标签： jquery twitter-bootstrap

【解决方案1】：

其实离我不远了。

$(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;
    });
});

【讨论】：