一页中的异步 owl 轮播

Question

我的页面上有 3 个同名 class 轮播。

 <div>
   <div class="owl-carousel owl-theme">
     <div class="item"><img src="assets/fullimage1.jpg"></div>
     <div class="item"><img src="assets/fullimage2.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme">
     <div class="item"><img src="assets/fullimage3.jpg"></div>
    <div class="item"><img src="assets/fullimage4.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme">
     <div class="item"><img src="assets/fullimage5.jpg"></div>
    <div class="item"><img src="assets/fullimage6.jpg"></div> 
   </div>
 </div>

然后在我的 js

 $(".owl-carousel ").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade"
});

这很好用，但所有轮播几乎同时开始。有没有办法在轮播之间增加延迟？所以首先开始第一个，然后当第一个完成时，第二个开始等等...... 提前谢谢你。

Answer 1

您可以像这样使用超时：

$(".owl-carousel ").each(function(i,elm){
  var delay = i*1000; // generate the delay somehow as you need
  setTimeout((function(){
    var $elm = $(elm);
    return function(){
       $elm.owlCarousel({  
           navigation : false, 
           singleItem : true,
           autoPlay: true,
           pagination: false,
           transitionStyle: "fade"
       });
    }
  })(),delay);
});

Answer 2

我建议您为每个轮播添加一个 ID，并为每个轮播分配一个单独的 autoPlay 属性。这样他们会在不同的时间重新开始，当你点击一个旋转木马时，它不会移动其他的。单击一次后，您的轮播将勾选每个轮播。

 <div>
   <div class="owl-carousel owl-theme" id="owl1">
     <div class="item"><img src="assets/fullimage1.jpg"></div>
     <div class="item"><img src="assets/fullimage2.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme" id="owl2">
     <div class="item"><img src="assets/fullimage3.jpg"></div>
    <div class="item"><img src="assets/fullimage4.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme" id="owl3">
     <div class="item"><img src="assets/fullimage5.jpg"></div>
    <div class="item"><img src="assets/fullimage6.jpg"></div> 
   </div>
 </div>

$("#owl1").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: 10000;
});

$("#owl2").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: 7000;
});

$("#owl3").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: 5000;
});

Answer 3

结合 Phil 和 TJ 的答案：

$(".owl-carousel ").each(function(i,v){
var delay = i*10000;
$(v).owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: delay
});
});

一页中的异步 owl 轮播

Asynchronous owl carousel in one page

javascript

jquery

html

delay

owl-carousel