twitter-bootstrap - Twitter Bootstrap轮播幻灯片时长

在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('pause')暂停轮播
在项目的持续时间和持续时间之后设置超时
完成后，我们应该暂停转盘


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

如您所见，我们被迫在开始时添加一个开始间隔，并且我将其设置为1000ms，但是每次暂停轮播duration-1000时我都会将其删除。我用下面的几行来解决第一个项目的问题，因为该项目没有被slid event捕获。

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

我还注意到，如果用户按下箭头，超时将变得疯狂，这就是为什么每次用户按下向左和向右箭头时都会清除超时。

这是我的实时示例http://jsfiddle.net/paulalexandru/52KBT/，希望此回复对您有所帮助。