如何设置更换幻灯片前的延迟时间？

Question

我使用Slick slider。更换幻灯片前需要设置延时，如何实现此任务？

这是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

试试这个：

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

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

});

Answer 2

您可以在灵活的选项中使用autoplaySpeed: 3000

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

Answer 3

您可以将速度设置为3000

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

将在3秒内完成转换，但它不会造成延迟，要使用延迟，我建议使用您自己的点按钮和方法slickGoTo，slickNext