javascript - 一页中的异步 Owl Carousel

我的页面上有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"
});

效果很好，但是所有轮播都几乎同时启动。有没有办法增加轮播之间的延迟？因此，首先启动第一个，然后当第一个完成时，第二个开始，依此类推...
先感谢您。

最佳答案

您可以使用这样的超时：

$(".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);
});

关于javascript - 一页中的异步 Owl Carousel ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33497001/