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

Question

我正在尝试使用 Slick.js 创建一个滑动画廊 - 查看 "Center Mode" 部分。

总而言之，图库功能正常，但是我有一个小故障：当我在最后一个元素上滚动到第一个元素时 - 我没有得到平滑的过渡，而是出现了一个小的跳跃第一个元素。

我创建了一个 Codepen 来演示我在说什么：https://codepen.io/anon/pen/YLExjo

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

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

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

Answer 1

Slick 在 classes 方面有一些奇怪的行为，它添加到幻灯片的元素 "on the edges" 或从元素中删除。解决该问题的一种方法是添加事件处理程序并自行修复 classes:

$('.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 class。

有关演示，请参阅 https://codepen.io/anon/pen/KRyXrG。

Answer 2

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

我用Angular但应该对其他人有用，我会在全球范围内解释

在您可以从 beforeChange 和 AfterChange 访问的地方声明一个变量。在我的案例中，我将其命名为 previousSlide 类型 number。
在 beforeChange 函数中将 event.currentSlide 分配给我的 `previousSlide。
现在在 afterChange 函数中我有我的变量 previousSlide 和这个函数的变量 event.currentSlide
的信息
然后我在这里创建自定义动画并制作所有过渡 etc.etcin 上一张和当前幻灯片。

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

注意：我做的动画只是幻灯片中的一些样式，所以活动幻灯片改变了一些颜色和高度，离开中心的幻灯片过渡回正常样式，所以不知道更大的转换行为。同样使用 Slick 的 CenterMode

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

Slick.js smooth transition between first and last elements

javascript

css

jquery

slick.js