自定义传送带间隔？

Question

在Bootstrap 3中，使用jQuery有一种方法可以根据我的传送带的索引进行排序，并添加每个幻灯片的自定义间隔，以便我可以有一张幻灯片10000毫秒和另一个500毫秒等？

我知道你可以设置data-interval属性，但是这会设置所有幻灯片的速度，因为你不能为每个项目添加自定义间隔属性。

data-interval="3000" 

我的旋转木马是设置这样的：

<div id="carousel" class="carousel slide"> 

    <div class="carousel-inner"> 

    <div class="item active"> 
     <a href="#"> 
       <img class="img-responsive" src=""> 
     </a> 
    </div> 

    <div class="item"> 
     <a href="#"> 
      <img class="img-responsive" src=""> 
     </a> 
    </div> 

    <div class="item"> 
     <a href="#"> 
      <img class="img-responsive" src=""> 
     </a> 
    </div> 

    <div class="item"> 
     <a href="#" > 
      <img class="img-responsive" src=""> 
     </a> 
    </div> 
</div> 

Answer 1

您可以创建表示幻灯片应该有多长可见的自定义属性，拉的是出于对活动项目上slide.bs.carousel或slid.bs.carousel事件（无论你喜欢/最适合你），然后将其设置为超时以进入下一张幻灯片。

$('#carousel-example-generic').on('slide.bs.carousel', function() { 
 
    var interval = $('div.item.active').attr('duration'); 
 
    setTimeout(function() { 
 
    $('.carousel').carousel('next'); 
 
    }, interval); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active" duration="3000"> 
 
     <img src="http://placehold.it/400x200" alt="..." /> 
 
     <div class="carousel-caption"> 
 
     First 
 
     </div> 
 
    </div> 
 
    <div class="item" duration="2000"> 
 
     <img src="http://placehold.it/400x200" alt="..." /> 
 
     <div class="carousel-caption"> 
 
     Second 
 
     </div> 
 
    </div> 
 
    <div class="item" duration="1000"> 
 
     <img src="http://placehold.it/400x200" alt="..." /> 
 
     <div class="carousel-caption"> 
 
     Third 
 
     </div> 
 
    </div> 
 
    <div class="item" duration="500"> 
 
     <img src="http://placehold.it/400x200" alt="..." /> 
 
     <div class="carousel-caption"> 
 
     Fourth 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

Answer 2

通过@MattD给出的解决方案似乎运作良好，另外，您可以覆盖旋转木马插件的滑动功能BU使用下面的代码：

<script src="js/carousel.js"></script> 
<script> 
    $.fn.carousel.Constructor.prototype.cycle = function (e) { 

    e || (this.paused = false) 
    this.interval && clearInterval(this.interval) 

    this.options.interval 
     && !this.paused 
     && (this.interval = setInterval($.proxy(this.next, this), this.$element.find('.item.active').data('interval') || this.options.interval)) 

    return this 
    } 
</script> 

以上使您可以设置利用data-interval属性的每张幻灯片的时间间隔，如下所示：

<div class="item" data-interval="500">