我试图为每张幻灯片设置不同的持续时间,因为我的一些幻灯片有大量的内容和一些小的请给我一个小提琴的解决方案
我试过这个,但它只适用于幻灯片动画计时：
.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轮播不允许每张幻灯片有不同的持续时间,但它提供了一种方法和一种我们可以使用的事件来实现这一点.
我们将使用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/,希望这个回复对你有所帮助.