【slick】最後のスライドから最初のスライドに移行するときの挙動

実現したいこと

前提

HPトップページにあるスライダー（3枚構成）の改修です。
Wordpressで制作中。

発生している問題・エラーメッセージ

センターの画像がopacity:1、
センター以外の画像がopacity:0.5になっていて、
スライドが動くごとにopacityの数値が変わるのですが、
3枚目から1枚目に移行するときだけ、
opacityの数値が変わるタイミングが遅くなっています。

他のスライドの移行は、ボタンを押したらすぐにopacityの数値が変わるのですが、
3枚目から1枚目に移行するときだけ、
ボタンを押して、スライドがセンターに来てからopacityの数値が変わるのです。

このタイミングのずれをほかのスライドの移行と同じものにしたいのです。

該当のソースコード

css

1.slider .slick-slide {2 transform: scale(0.98);3 transition: all .5s;4 opacity: 0.5;5}6 7.slider .slick-slide.slick-center{8 transform: scale(0.98);9 opacity: 1!important;10}

slideMainSub.js

1 $(".slider").slick({ 2 autoplay: true, 3 infinite: true, 4 autoplaySpeed: 5000, 5 speed: 2000, 6 slidesToShow: 2, 7 slidesToScroll: 1, 8 cssEase: "ease-in-out", 9 prevArrow: '<div class="slick-prev"></div>', 10 nextArrow: '<div class="slick-next"></div>', 11 pauseOnFocus: false, 12 pauseOnHover: false, 13 centerMode: true, 14 variableWidth: true, 15 dots: true, 16 });

補足情報（FW/ツールのバージョンなど）

slickは、ダウンロードして、slick.min.jsファイルとslideMainSub.jsファイルがあります。