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

试试这个：

// 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

如何在更换幻灯片之前设置延迟？

3 个答案: