如何推迟每个项目的引导传送带？

Question

我有data-delay属性为每个项目，我想延迟我的项目，例如，如果我的第一个项目有data-delay="10"然后延迟我的项目10秒或如果我的第二个项目属性是20比延迟我的项目20秒是可能的？

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 

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

 
    <div class="carousel-inner"> 
 
    <div class="item active" data-delay="10"> 
 
     <a href="#"><img src="http://placekitten.com/1600/600" /></a> 
 
     <div class="carousel-caption"> 
 
     <h3>Meow</h3> 
 
     <p>Just Kitten Around</p> 
 
     </div> 
 
    </div> 
 
    <div class="item" data-delay="5"> 
 
     <a href="#"><img src="http://placekitten.com/1600/600" /></a> 
 
     <div class="carousel-caption"> 
 
     <h3>Meow</h3> 
 
     <p>Just Kitten Around</p> 
 
     </div> 
 
    </div> 
 
    <div class="item" data-delay="23"> 
 
     <a href="#"><img src="http://placekitten.com/1600/600" /></a> 
 
     <div class="carousel-caption"> 
 
     <h3>Meow</h3> 
 
     <p>Just Kitten Around</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <a class="left carousel-control" href="#carousel-example" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 
</div> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Answer 1

如果你改变在每张幻灯片的时间间隔，就可以得到这个功能。

https://jsfiddle.net/9nkLousp/1/

function slide() { 
    $(this).carousel({ 
    interval: $(this).find(".item.active").data("delay") * 1000 
    }); 
} 

slide.bind($('#carousel'))(); 
$('#carousel').on('slid.bs.carousel', slide) 

此外，我还添加了一个转盘ID：

<div id="carousel" class="carousel slide" data-ride="carousel">