光滑的轮播 css 淡入淡出过渡不适用于第一个滑块答案

【问题标题】：Slick Carousel css fade transition doesn't work on first slider光滑的轮播 css 淡入淡出过渡不适用于第一个滑块
【发布时间】：2017-06-21 16:37:07
【问题描述】：

我有一个标准的光滑轮播滑块。我做到了，所以每个 div 在滑动时都会淡入淡出。我的问题是，在遍历所有 div 之后，当它重新启动时，第一个 div 不会淡入，而是突然出现并延迟。

JSFiddle：https://jsfiddle.net/BradMitchell/3gLtjL7h/

HTML

<div class="single-item">
  <div class="box"><h2>1</h2></div>
  <div class="box"><h2>2</h2></div>
  <div class="box"><h2>3</h2></div>
</div>

CSS

.slick-slide {
        opacity:0;
        transition:opacity 0.3s ease-out;
    }

.slick-active {
        opacity:1!important;
        transition:opacity 0.3s ease-in;
    }

【问题讨论】：

@alex 我注意到了，但我想不出解决办法。

标签： javascript jquery html css

【解决方案1】：

这里是解决方法：link。唯一的变化是css

.slick-cloned {
  opacity: 0.3;
}

这种解决方案实际上只是伪装，并且依赖于人眼的缺陷，无法注意到高速时微小的渐变梯度变化。

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

$('.single-item').slick();

.single-item {
  width:200px;
}

.box {
  height:200px;
  width:200px!important;
  text-align:center;
  background-color:rgb(50,50,50);
  color:white;
}

.slick-slide {
		opacity:0;
		transition:opacity 1s ease-out;
	}
  
.slick-active {
		opacity:1!important;
		transition:opacity 1s ease-in;
	}
  
.slick-cloned {
  opacity: 0.3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/>


<div class="single-item">
  <div class="box"><h2>1</h2></div>
  <div class="box"><h2>2</h2></div>
  <div class="box"><h2>3</h2></div>
</div>

【讨论】：

【解决方案2】：

这是由于克隆元素而发生的已知问题。解决方法是添加中心模式

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

这是一个例子 http://jsfiddle.net/karthick6891/v9svc9c7/

问题参考： https://github.com/kenwheeler/slick/issues/463

【讨论】：