Question

我有一个标准的光滑旋转木马滑块。我做了它，所以当它滑动时每个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;
    }

Answer 1

以下是解决方法：link。唯一的变化是css

.slick-cloned {
  opacity: 0.3;
}

这种解决方案实际上只是假装，依赖于人眼的不完美而不会注意到高速时微小渐变渐变的变化。

你可能不得不玩弄价值观。转换速度越快，您希望拥有的不透明度值越小。我测试并想象你想要将不透明度设置为0.1的2s的过渡速度。 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>

Answer 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

Slick Carousel css淡入淡出过渡不适用于第一个滑块

2 个答案: