引导轮播更改间隔

Question

Different slide duration for each item on bootstrap 3.1 carousel 展示了一种更改每张幻灯片的间隔的方法。我的无知是深刻的；我不擅长 Bootstrap 或 Javascript，也不敢尝试修改 carousel.js。我该如何实施？

Answer 1

这里有一些使用 jsfiddle 代码的简单说明。 您提供的链接中引用的 jsfiddle 包含实现它所需的所有代码。

1. 制作一个空白的纯文本文件并将其命名为 custom.js（或任何你想要的.js）。
2. 将 jsfiddle 中的代码放入该文件并保存：

Javascript：

  $(document).ready(function() {
  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);   
 });
 });

1. 您需要将 custom.js 文件放在您网站的某个位置，然后在 jQuery 和 bootstrap.js 之后将其加载到您的页面中。您需要设置文件的路径。

脚本：

  <script type="text/javascript" src="your path to/custom.js"></script>