Javascript 光滑的旋转css淡入过渡在第一个滑块上不起作用

我有一个标准光滑的旋转木马滑块。我这样做是为了每个div在滑动时都会淡入淡出。我的问题是，在经历了所有的div之后，当它重新启动时，第一个div不会消失，而是突然出现并延迟

JSFiddle：

HTML

---

这是一个已知的问题，因为克隆了元素。解决方法是添加中心模式

$('.single-item').slick({
        centerMode: true,
        centerPadding: '80px',
        infinite: true,
        slidesToShow: 1,
        arrows: true
});

这里有一个例子

问题编号： 以下是解决方法：。唯一的变化是css

.slick-cloned {
  opacity: 0.3;
}

这个解决方案实际上只是假造的，依靠人眼的缺陷来避免在高速下注意到微小的衰减梯度的变化

你可能不得不玩弄价值观。过渡越快，您想要的不透明度值越小。我测试并计算了2秒的过渡速度，你想将不透明度设置为0.1

$'.single item'.slick； .单项{ 宽度：200px； } .盒子{ 高度：200px； 宽度：200px！重要； 文本对齐：居中； 背景色：rgb50,50,50； 颜色：白色； } .滑滑梯{ 不透明度：0； 过渡：不透明度1s缓解； } .滑头活跃{ 不透明度：1！重要； 过渡：不透明度1s，易于调节； } .滑头克隆{ 不透明度：0.3； } 1. 2. 3.

---

@亚历克斯，我注意到了，但我想不出解决办法。

$('.single-item').slick({
        centerMode: true,
        centerPadding: '80px',
        infinite: true,
        slidesToShow: 1,
        arrows: true
});

.slick-cloned {
  opacity: 0.3;
}