twitter-bootstrap – Twitter Bootstrap Carousel幻灯片持续时间

在Twitter Bootstrap Carousel中,如何使特定幻灯片的持续时间与其他幻灯片不同？

我可以使用“interval”参数更改整个滑块持续时间,但不知道如何为特定幻灯片设置自定义持续时间.

解决方法

Bootstrap 3.1轮播不允许每张幻灯片有不同的持续时间,但它提供了一种方法和一个我们可以使用的事件来实现这一点.

我们将使用slid.bs.carousel事件来检测轮播完成其幻灯片转换的时间以及.carousel(‘pause’)选项以阻止轮播在项目中循环.

我们将在每个具有不同持续时间的轮播项目上使用此属性data-interval =“x”,因此我们的html将如下所示：

<div class="carousel-inner">
    <div class="active item" data-interval="3000">
        <img src="Url 1" />
    </div>
    <div class="item" data-interval="6000">
        <img src="Url 2" />
    </div>
    <div class="item" data-interval="9000">
        <img src="Url 3" />
    </div>
</div>

现在,我们所要做的就是：

>使用slid.bs.carousel检测何时显示新项目
事件
>检查他的持续时间
>使用.carousel暂停旋转木马(‘暂停’)
>使用项目的持续时间和持续时间后设置超时
完成后我们应该取消旋转木马

javascript代码如下所示：

var t;

var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});",start-1000);

$('#myCarousel').on('slid.bs.carousel',function () {   
     clearTimeout(t);  
     var duration = $(this).find('.active').attr('data-interval');

     $('#myCarousel').carousel('pause');
     t = setTimeout("$('#myCarousel').carousel();",duration-1000);
})

$('.carousel-control.right').on('click',function(){
    clearTimeout(t);   
});

$('.carousel-control.left').on('click',function(){
    clearTimeout(t);   
});

正如你所看到的,我们在开始时被迫添加一个起始间隔,我将它设置为1000毫秒,但每次我暂停旋转木马持续时间-1000时我将其删除.我已经使用下面的行来解决第一个项目问题,因为该项目没有被滑动事件捕获.

var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});",start-1000);

我还注意到,如果用户按下箭头,超时会变得很疯狂,这就是我每次用户按下左右箭头时清除超时的原因.

这是我的实例http://jsfiddle.net/paulalexandru/52KBT/,希望这个回复对你有所帮助.