如何延迟3个滑块的自动播放时间分别为0.5秒？

Question

我有3个幻灯片，它们是用Owl Carousel 2创建的。

我想初始化它们在页加载，但分别由延时0.5秒自动播放，即第一幻灯片放映开始，第二个等待0.5秒直到自动播放开始时，第三等待1秒。

已经想过要为每个幻灯片代码编写一个函数，然后使用setTimeout()来延迟执行。这里的问题是，直到执行时刻，标记才会被视为幻灯片，这会破坏布局。幻灯片放映应在页面加载时初始化，但自动播放延迟。

这是到目前为止我的代码：

$('.carousel01').owlCarousel({ 
    items: 1, 
    loop: true, 
    autoplay: true, 
    autoplayTimeout: 5000, 
    smartSpeed: 300, 
    animateOut: 'fadeOut', 
    animateIn: 'fadeIn', 
    nav: false, 
    dots: false 
    }); 

    $('.carousel02').owlCarousel({ 
    items: 1, 
    loop: true, 
    autoplay: true, 
    autoplayTimeout: 5000, 
    smartSpeed: 300, 
    animateOut: 'fadeOut', 
    animateIn: 'fadeIn', 
    nav: false, 
    dots: false 
    }); 

    $('.carousel03').owlCarousel({ 
    items: 1, 
    loop: true, 
    autoplay: true, 
    autoplayTimeout: 5000, 
    smartSpeed: 300, 
    animateOut: 'fadeOut', 
    animateIn: 'fadeIn', 
    nav: false, 
    dots: false 
    }); 

会感谢你的建议。

Answer 1

我已经想通了。这里是最终的代码：

// Get the elements 
var owl_1 = $('.carousel01'); 
var owl_2 = $('.carousel02'); 
var owl_3 = $('.carousel03'); 

// Apply OWL Carousel 
owl_1.owlCarousel({ 
    items: 1, 
    loop: true, 
    autoplay: true, 
    autoplayTimeout: 5000, 
    smartSpeed: 300, 
    animateOut: 'fadeOut', 
    animateIn: 'fadeIn', 
    nav: false, 
    dots: false 
}); 

owl_2.owlCarousel({ 
    items: 1, 
    loop: true, 
    autoplay: true, 
    autoplayTimeout: 5000, 
    smartSpeed: 300, 
    animateOut: 'fadeOut', 
    animateIn: 'fadeIn', 
    nav: false, 
    dots: false 
}); 

owl_3.owlCarousel({ 
    items: 1, 
    loop: true, 
    autoplay: true, 
    autoplayTimeout: 5000, 
    smartSpeed: 300, 
    animateOut: 'fadeOut', 
    animateIn: 'fadeIn', 
    nav: false, 
    dots: false 
}); 

// STOP AUTOPLAY (without this it wont work, oddly...) 
owl_1.trigger('stop.owl.autoplay'); 
owl_2.trigger('stop.owl.autoplay'); 
owl_3.trigger('stop.owl.autoplay'); 

// START AUTOPLAY SEQUENCIALLY 
setTimeout(function(){    
    owl_1.trigger('play.owl.autoplay', [10]) // <-- 10 is the delay of scroll 
}, 1000); 

setTimeout(function(){    
    owl_2.trigger('play.owl.autoplay', [10]) // <-- 10 is the delay of scroll 
}, 1500); 

setTimeout(function(){    
    owl_3.trigger('play.owl.autoplay', [10]) // <-- 10 is the delay of scroll 
}, 2000);