Slick Carousel CSSのフェードトランジションは最初のスライダでは機能しません。

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

これは既知の問題は、クローン化された要素の起こりです。周りの仕事はここ

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

センターモードを追加する場合の例である http://jsfiddle.net/karthick6891/v9svc9c7/

発行REF：link： https://github.com/kenwheeler/slick/issues/463

Answer 2

ここでは、回避策です。唯一の変化は、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 { 
 
\t \t opacity:0; 
 
\t \t transition:opacity 1s ease-out; 
 
\t } 
 
    
 
.slick-active { 
 
\t \t opacity:1!important; 
 
\t \t transition:opacity 1s ease-in; 
 
\t } 
 
    
 
.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>