Bootstrap 3.1轮播上每个项目的不同幻灯片持续时间

Question

我试图为每张幻灯片设置不同的持续时间,因为我的一些幻灯片有大量的内容和一些小的请给我一个小提琴的解决方案

我尝试了这个,但它只适用于幻灯片动画计时:

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

Answer 1

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>

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

1. 检测何时使用该slid.bs.carousel 事件显示新项目
2. 检查他的持续时间
3. 暂停使用旋转木马 .carousel('pause')
4. 使用项目的持续时间设置超时,并在完成持续时间后,我们应该取消暂停轮播

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毫秒,但每次我暂停旋转木马时都将其删除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/,希望这个回复对你有所帮助.