Question

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

$('.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'事件我想根据数据属性值重置间隔。我可以得到的值，所以没有问题，但我只是使用'选项'来设置间隔，它会工作吗？

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

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

用户建议使用超时，这对我来说似乎在IE9中引起问题。我怀疑这些超时如何可能干扰Bootstraps轮播间隔存在问题。 结束修改

Answer 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;
    });
});

在运行时更改Bootstrap Interval

1 个答案: