我正在尝试使用 Slick.js 创建一个滑动画廊 - 查看“中心模式”部分。
所有画廊都正常运行，但是我有一个小故障：当我在最后一个元素上并滚动到第一个元素时 - 我没有得到平滑的过渡，而是第一个元素的小跳跃.
我创建了一个 Codepen 来演示我在说什么：https://codepen.io/anon/pen/YLExjo
我尝试修改任何可能的类或类组合：
.slick-cloned, .slick-active etc...
但我仍然在跳跃。我该如何解决？
【问题讨论】：
标签： javascript jquery css slick.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 以获取演示。
【讨论】：
我知道这个问题很老，但我遇到了同样的问题，但没有找到。任何有帮助的东西?，所以我做了一点蛮力，不是最终的解决方法，因为有一点延迟，但至少现在所有的动画都是一样的。
我使用 Angular 但应该为其他人工作，我将在全球范围内解释
如果您可以从beforeChange 和AfterChange 访问它，请在某个地方声明一个变量。我把它命名为previousSlide，在我的例子中输入number。
在beforeChange 函数中，将event.currentSlide 分配给我的`previousSlide。
现在在afterChange 函数中，我有我的变量previousSlide 和这个函数的变量event.currentSlide 的信息
然后我在这里创建 mi 自定义动画，并在以前和当前幻灯片中进行所有转换等。
测试它，现在从最后一个到第一个（反之亦然）与其他动画相同
注意：我制作的动画只是幻灯片中的一些样式，因此活动幻灯片会更改一些颜色和高度，离开中心的幻灯片会转换回正常样式，所以不知道一些更大的转换行为.也使用 Slick 的 CenterMode
【讨论】：