twitter-bootstrap - bootstrap 3.1轮播中每个项目的不同幻灯片持续时间

Question

我试图为每张幻灯片设置不同的持续时间，因为我的一些幻灯片内容很大，而一些幻灯片内容很小，请给我一个 fiddle 的解决方案

我试过这个，但它只适用于幻灯片动画时间:

.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>

现在，我们要做的就是:

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

如您所见，我们在开始时被迫添加一个起始间隔，我将其设置为 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/ ，希望此回复对您有所帮助。