定制轮播间隔？

在Bootstrap 3中，使用jQuery有一种方法可以按照我的轮播索引进行排序并添加每张幻灯片的自定义间隔，这样我就可以有一张幻灯片10000毫秒和另一张500毫秒等？

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

data-interval="3000" 

我的旋转木马设置如下：

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

    
  
 
 
 
 
 
  
 
  
 First 
 
 
  
 Second 
 
 
  
 Third 
 
 
  
 Fourth 
 
 
    Previous    Next   

Answer 2

@MattD给出的解决方案似乎运行良好，或者你可以使用以下代码覆盖carousel插件bu的滑动function：

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