滑らかなカルーセルの繰り返しエラー

Question

私は、カルーセルの中央オブジェクトに焦点を合わせるためにCSS変換を使用しようとしています。 （回転台はSlick.jsです）

最後のアイテムから最初のアイテムに戻るときを除いて、変更が表示される前に一時停止とジャンプがあります。

この原因は何ですか？どうすれば修正できますか？

https://jsfiddle.net/6d91cqoq/1/

//pseudo code 

EDIT：それはまた、最初から最後まで行く起こります。

EDIT 2： それは私がSlick.jsのウェブサイトからアイデアを取った注目に値します：http://kenwheeler.github.io/slick/

ページに行くモード」の例と、この正確なことを行うためにトランスフォームを使用しています。私は、私の人生にとって、目標要素以外のものが何であるかを理解することはできません。

編集3：サンプルにあるように、要素をH3要素に変更しようとしました。変化なし。

Answer 1

Slickは、「最初から最後」に切り替えるときにスライド要素のDOM順序を変更することが原因です。 DOM要素が削除されて追加されたときに遷移が起こらない...純粋なCSSソリューションではなく、javascriptとSlicks beforeChangeとafterChangeイベントでこの問題を回避することができます。私は例を作りましたが、私が作った例もやや効果を変えています（中央のスライドは、中央になるまで広がらないでしょう、例えばafterChange）。たぶんSlicksで、あなたの例のように動作させることができる次と前のスライドのパラメータは、それをもっと調査する時間がありませんでした。

https://jsfiddle.net/6d91cqoq/2/

あなたの例に加えた変更：

//Added my own "active" class, so it does not to interfere with slicks active class 
.slick-slide.active { 
    opacity: 1; 
    transform: scale(1.50); 
} 

JS

//make current center active after initialization 
$('.slick-center').addClass('active'); 

//before slide change, make all "inactive" 
$('.center').on('beforeChange', function(event, slick, index){ 
    $('.slick-slide').removeClass('active'); 
}); 

//after change make the center one "active" 
$('.center').on('afterChange', function(event, slick, index){ 
    $(slick.$slides[index]).addClass('active'); 
});