Question

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

Answer 1

以下是一些使用jsfiddle代码的简单说明。您提供的链接中引用的jsfiddle具有实现它所需的所有代码。

制作一个空白的纯文本文件，并将其命名为 custom.js （或您想要的任何内容。）
将来自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>

bootstrap轮播更改间隔

1 个答案: