Question

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

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

我想稍微向前滑动（向左侧）第一个标题延迟，然后第二个标题具有相同的延迟，第三个标题也是如此，然后我想为下一张幻灯片进行更改。
在下一张幻灯片上更改后，我希望这些标题以相同的方式出现，但是从OTHER侧出现。我只能通过setTimeout()功能和＆＃39; slickNext＆＃39;向左滑出。方法，但我不知道如何让它们以相同的延迟方式从另一侧出现在下一张幻灯片上。

Answer 1

Slick滑块有自己的事件名为“afterChange”，也有参数，它有currentSlide和nextSlide可以用来制作动画。

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

Answer 2

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

prev()

或

next()

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

滑动滑块（＆＃39; afterChange＆＃39;）

2 个答案: