Slick - 幻灯片以 centerMode 和可变宽度跳跃答案

【问题标题】：Slick - slides jump with centerMode and variable widthSlick - 幻灯片以 centerMode 和可变宽度跳跃
【发布时间】：2018-05-13 19:07:16
【问题描述】：

我有一个带有 centerMode true 和 variableWidth: true 的光滑滑块。

中心幻灯片需要比其他幻灯片大 2 倍。
所有幻灯片的宽度都是 80 像素，但中心需要有 160 像素。

这是我的问题的小提琴和代码（jsfiddle 搞砸了，但你可以看到“跳转”）：

$('#timeline').slick({
      centerMode: true,
      centerPadding: '60px',
      slidesToShow: 5,
      variableWidth: true,
      arrows:false
});

如果需要，我会发布更多代码。有什么解决办法吗？

【问题讨论】：

【解决方案1】：

我解决了这个问题，在所有幻灯片上使用固定宽度

.slick-slide { width:200px; }

和 variableWidth: true
我还将 centerMode 设置为 true 并编辑了流畅的活动幻灯片以获得所需的结果。

【讨论】：

【解决方案2】：

如果你给 .slick-track 一些 CSS 动画过渡，它会很好地工作。.slick-track { transition: all 0.3s ease; }

【讨论】：