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

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

我尝试过这个，但它只适用于幻灯片动画计时：

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

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

我们将使用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 event
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/ http://jsfiddle.net/paulalexandru/52KBT/，希望这个回答对您有帮助。