如何設置更改幻燈片之前的延遲？

Question

我使用Slick slider。我需要在更改幻燈片之前設置延遲，我如何才能實現此任務？

這裏是滑蓋的JS代碼：

$(".intro__slider").slick({ 
    infinite: true, 
    dots: true, 
    dotsClass: "intro__dots", 
    arrows: false, 
    swipe: false, 
    draggable: false 
    }); 

    var introTitle = $(".intro__title"), 
     introSlide = $(".intro__slide"); 

    $(".intro__slider").on("beforeChange", function() { 
    introTitle.addClass("intro__title_hidden"); 
    introSlide.addClass("intro__slide_overlayed"); 
    }); 

    $(".intro__slider").on("afterChange", function() { 
    introTitle.removeClass("intro__title_hidden"); 
    introSlide.removeClass("intro__slide_overlayed"); 
    }); 

Here is full code on codepen

Answer 1

您可以使用autoplaySpeed: 3000，在光滑的選項

$(".intro__slider").slick({ 
    autoplaySpeed: 3000, 
    infinite: true, 
    dots: true, 
    dotsClass: "intro__dots", 
    arrows: false, 
    swipe: false, 
    draggable: false 
}); 

Answer 2

你可以用速度到3000

$(".intro__slider").slick({ 
    infinite: true, 
    autoplay: true, 
    autoplaySpeed: 6000, 
    dots: true, 
    dotsClass: "intro__dots", 
    arrows: false, 
     speed:3000 
    }); 

將使轉型3秒，但它不會讓一個延遲，使用延遲，我會建議使用自己的圓點按鈕和方法slickGoTo，slickNext

Answer 3

試試這個：

// On before slide change 
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 

    setTimeout(function() { 
     //your code to be executed after 1 second 
    }, 1000); 

});