在下一张幻灯片之前放慢速度

【问题标题】：Slow down slick before next slide在下一张幻灯片之前放慢速度
【发布时间】：2017-12-13 19:14:20
【问题描述】：

我已经四处寻找了一段时间，但找不到解决方案。

基本上，在我的 slick 滑块中，我有一些文本，我想在 slick 上和下一个 slick 之前（点击箭头/点之后）制作动画。

mySlick.slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        arrows: true,
        dots: true,
        autoplay: false,
        waitForAnimate: false,
        prevArrow: '<i class="icon-caret-left"></i>',
        nextArrow: '<i class="icon-caret-right"></i>',
    });

我试过了

mySlick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {

    // Run an animation before next slide comes in.
    mySlick.slickPause();

    setTimeout(function() {

            // add animation class

            mySlick.slickNext();

    }, 2000);
}

有什么方法可以在播放下一张幻灯片之前设置暂停？

提前致谢。

【问题讨论】：

标签： jquery slick.js

【解决方案1】：

从外观上看，您可能在初始化 slick 后绑定了事件。您需要绑定'beforeChange' 事件在 slick 初始化之前。所以，

// bind your events:
mySlick.on('beforeChange', function() {
  // what to do before change
})

// then initialize slick:
mySlick.slick({
  // slickslider options
})

另外，在.slick() 函数中将slickNext 等方法作为字符串调用，例如.slick('slickNext')

在您的情况下，您还需要在 SetTimeout 之外添加动画，使其显示 2 秒然后更改。所以，

mySlick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  mySlick.slick('slickPause');
  // add animation class here

  setTimeout(function() {
    mySlick.slick('slickNext');
  }, 2000);
}

In slick 1.4，回调方法已被弃用并替换为事件。同样，在 slick 初始化之前使用它们。

【讨论】：