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

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用于演示。