时间戳

首页 > 解决方案 > Slick.js 在第一个和最后一个元素之间平滑过渡

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

问题描述

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

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

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

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

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

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

标签： javascriptjquerycssslick.js

解决方案

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 。

推荐阅读