1. jQueryスライダープラグイン slick.jsで発生した不具合の内容
2. slick.jsのスライダー2周目で最初の画像がカクつく現象の解決方法

3枚の画像を使って、中央に来る画像は大きめに表示、それ以外は左右に配置して小さめに表示するスライダーを、jQueryのスライダープラグイン slickで作成した時に気になった不具合をご紹介。
作成したスライダーは上のようなイメージです。コードは割愛しますが、slickの設定は、autoplay、infinite、arrows、dots、centerModeをTRUEに、slidesToShowは1に設定。
CSSは、transitionとtransform: scale()で、でアニメーションと要素の拡大・縮小をさせています。

一定時間経過すると、3枚ある内の右にある画像は大きくなりながら中央に、中央の画像は小さくなりながら左に移動します。

slickを使ったこのようなスライダーの作り方は、以下のサイトが参考になるかも。

slickのカレントクラスを利用した実装サンプル
https://www.nxworld.net/jquery-plugin-slick-current-class-examples.html

jQueryスライダープラグイン slick.jsで発生した不具合の内容

遭遇した不具合ですが、slick.jsで作成した上図のスライダーを自動再生させて、3枚目から1枚目を表示する時に「カクつく現象」が発生します。
どういう事かというと

3枚目の画像から1枚目の画像に切り替わる時、

1枚目の画像は、拡大されずに一瞬このような状態になります。

この一瞬の間があってから画像が大きくなるのでカクついているように見えるんです。
この現象は3枚以上の画像を使用する時も発生します。

centerMode オプションで、.slick-center に対してトランジションを効かせたい場合は slidesToShow オプションが 2 以上必要です。 これは slick の特性の都合上…としか言いようがないです。 おそらく、 centerMode を利用するのに 1 だけだと slick-clone（前後に作られるスライドアイテムのクローン） の生成が追いついておらず、トランジションを効かせる前と後の処理の、「前」が認識できないからだと思います。

---

jQueryプラグイン「slick」実装、ループ時（2周目へのスライド時）のカクツキを無くしたい より引用 https://teratail.com/questions/126058

slick.jsのスライダー2周目で最初の画像がカクつく現象の解決方法

このslick.jsの不具合を解消する方法を探していたら、Qiitaで、SHUN Yさんが解消方法を投稿していました。

github に上がっている slick.js と公式サイトで読み込んでいる slick.js を比較してみたところ、何やら色々と差分が・・・
※両方ともバージョン1.8.0で比較

ひとまず、公式サイトで読み込んでいる以下のファイルを使用することでバグは回避出来るようです。
https://kenwheeler.github.io/slick/slick/slick.js

---

【slick.js】2週目に入る際に「.slick-center」の位置がずれるバグ - Qiita　より引用
https://qiita.com/sy_125/items/1d90609f63bd1d65a6f1

投稿されている内容を見てみると、ダウンロードで配布しているファイルではなく、slick.js公式サイトのページが読み込んで使用しているjavascriptファイルを使用することで、カクつく不具合を解消出来るという事で、実際試してみたら、ほんとにカクつく不具合が解消されました！

公式サイトが読み込んで使用しているslick.js
https://kenwheeler.github.io/slick/slick/slick.js

画像の右側が公式サイトが読み込んで使用しているslick.jsで、左は公式サイトのダウンロードボタンから取得できるjsファイル。
確かに、DiffMergeで差異を見ると、slick.jsは、どちらもバージョン1.8.0なんですが、javascriptのコードで異なる部分が結構ありました。

画像左端の縦長の列がファイル全体の表示で、赤く色が付いている箇所が異なっている部分。
2022年2月現在、公式サイトからslick バージョン1.8.1がダウンロードできますが、この現象はまだ解消されていません。

※今後、公式サイトで使用されているjsファイルが更新されて処理内容が変わった場合、この現象が解決しなくなる可能性がありますので、使用する場合は事前に動作テストしてからお使いください。

同様の現象でお困りの方の手助けになれば幸いです。