javascript - Bootstrap 轮播更改间隔

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

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

脚本:

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