异步猫头鹰旋转木马在一个页面中

Question

我的页面上有3个具有相同类名的转盘。

 <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

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

Answer 2

您可以使用这样的超时：

$(".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 3

我建议您为每个转盘添加一个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;
});