光滑的滑块（'afterChange'）答案

【问题标题】：Slick slider on('afterChange')光滑的滑块（'afterChange'）
【发布时间】：2016-12-26 19:55:25
【问题描述】：

我正在尝试找到使我能够在更改之前或之后更改活动滑块内容的动画的选项或方法。例如，我有一个名为“slider-header”的 Slick 滑块，它里面有三个 <h1> 标签：

<div id="slider-header">
    <div>
        <h1>First header</h1>
        <h1>Second header</h1>
        <h1>Third header</h1>
    </div>
</div>

我想先滑出（到左侧）第一个标题稍有延迟，然后第二个标题具有相同的延迟，第三个标题也是如此，然后我想更改下一张幻灯片。
在下一张幻灯片上进行更改后，我希望这些标题以相同的方式出现，但从另一侧显示。我只能使用setTimeout() 函数和 'slickNext' 方法将滑出到左侧，但我不知道如何让它们以相同的延迟方式从另一侧出现在下一张幻灯片上。

【问题讨论】：

向我们展示您的代码。到目前为止你尝试过什么？

标签： javascript jquery slick.js

【解决方案1】：

Slick 滑块有它自己的事件，称为“afterChange”，并且作为参数，它有 currentSlide 和 nextSlide 可用于制作动画。

$('#slider-header > div').on('afterChange', function(event, slick, currentSlide, nextSlide){
    console.log(nextSlide);
});

【讨论】：

对，但下一张幻灯片会立即滑动，标题也将滑动。我希望它们从右侧一个接一个地出现。也许我以错误的方式使用此事件。你能做一个jsfiddle来更深入地解释吗？非常感谢！
使用 slick-current 或 slick-active 类，当 slide 有 slide-active 类时，显示带有 CSS 效果的内容。否则隐藏其他元素，直到幻灯片 ahs 幻灯片活动类。
我正在尝试检查它是否有类，但没有任何反应，是否可以通过 on('afterChange') 事件以某种方式实现它？ : if($("header-slide.slick-slide").hasClass('slick-current')) { alert("有课！"); }

【解决方案2】：

我找到了解决方案。使用 jQuery

prev()

或

next()

我可以针对滑块的方向以及我需要制作动画的幻灯片的方法。谢谢大家的帮助！

【讨论】：