Question

我正在尝试使用Slick.js创建一个滑动图库 - 请查看“中心模式”部分。

所有画廊功能都正确，但是我有一个小故障：当我在最后一个元素并滚动到第一个元素时 - 我没有得到平滑过渡，而是第一个元素的小跳跃

我创建了一个Codepen来演示我正在谈论的内容：https://codepen.io/anon/pen/YLExjo

我尝试修改任何可能的类或类组合：

.slick-cloned, .slick-active etc...

但我仍然得到这个跳跃。我该如何解决？

Answer 1

Slick对于在幻灯片放映的“边缘”元素中添加或删除的类有一些奇怪的行为。解决该问题的一种方法是添加事件处理程序并自行修复类：

$('.your-selector').slick({
    // configuration
}).on('beforeChange', (event, slick, currentSlide, nextSlide) => {
    if (currentSlide !== nextSlide) {
        document.querySelectorAll('.slick-center + .slick-cloned').forEach((next) => {
            // timeout required or Slick will overwrite the classes
            setTimeout(() => next.classList.add('slick-current', 'slick-center'));
        });
    }
});

基本上，它会强制幻灯片中的下一个（或上一个）元素实际上具有您设置过渡的slick-center类。

请参阅https://codepen.io/anon/pen/KRyXrG了解演示。

Answer 2

我知道这个问题很旧，但是我遇到了同样的问题，但没有找到。 ?的任何帮助，所以我做了一点蛮力，都不是最终解决办法，因为延迟很小，但至少现在所有动画都是相同的。

我使用Angular，但应该为其他人工作，我将在全球进行解释

在可以从beforeChange和AfterChange访问的地方声明一个变量。在我的情况下，我将其命名为previousSlide，类型为number。
在beforeChange函数中，将event.currentSlide分配给了我的`previousSlide。
现在在afterChange函数中，我同时拥有变量previousSlide和此函数的变量event.currentSlide
的信息。
然后我在此处创建mi自定义动画，并在上一张和当前幻灯片中进行所有过渡等。

进行测试，现在从最后到第一个（反之亦然）与其他动画相同

注意：我要动画的只是幻灯片中的某些样式，因此活动的幻灯片会更改一些颜色和高度，并且离开中心的幻灯片会转换回普通样式，因此不知道某些较大的转换行为。也使用Slick的CenterMode

Slick.js在第一个和最后一个元素之间平滑过渡

2 个答案: