【Swiper】ループ時のカクつきを直す

起きていた問題

下記のような中央スライドが大きいスライダーを実装したところ、ループのつなぎ目のタイミングでアニメーションがカクつく現象が発生しました。(Swiper 8.4.7)

原因

CSSのスタイル（transform: scale）を .swiper-slide-active にしか当てていなかったためです。
Swiperで loop: true を設定すると、無限ループしているように見せるために、JavaScriptが自動的に最初と最後のスライドをクローンして前後にくっつけます。
この複製されたスライドには、元のスライドとは違う特殊なクラスが付与されます。

通常のスライドが中央に来た時 ➔ .swiper-slide-active

複製されたスライドが中央に来た時 ➔ .swiper-slide-duplicate-active

つまり、複製されたスライドが中央に来た瞬間だけ scale(1.3) が効かなくなり、カクついて見えていました。

修正前のコード

.swiper-slide-active {
  transform: scale(1.3);
}

修正後のコード

.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1.3);
}

これで違和感なくスルスル動くようになります！