如何延遲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);