Swiperのloopで2周目以降1枚目→2枚目がカクつく

以下デザインのスライダーを作った時に、
「2周目以降、1枚目から2枚目に移動するときに、スライドにつけた段差が一瞬なくなる」
という挙動が発生しました。

※デザイン：真ん中のactiveクラスが一番低く、左右に階段のように段差があるスライダー

スライドの段差自体は以下のように「transform」でつけてました。

結論としては、「.swiper-slide-duplicate-active」「.swiper-slide-duplicate-prev」「.swiper-slide-duplicate-next」を追加したら解決しました！

  // スライドの動きに関する記述
  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: translate(0, 5rem);
  }
  .swiper-slide-prev,
  .swiper-slide-next,
  .swiper-slide-duplicate-prev,
  .swiper-slide-duplicate-next {
    transform: translate(0, 2.5rem);
  }

  .swiper-slide {
    transition: all 0.3s;
    height: auto;
  }

以下記事の「ループモード時に気を付けること」で発見できました！🙇‍♂️

Webサイトのコーディングをするなら必修とも言えるスライダー。スライダー実装用のJSプラグインはいろいろあり

Swiper loopの構造
1. 関連

Swiper loopの構造

コードは以下のように記述してました。
・「loop」を使用
・「centeredSlides」を使用してactiveスライドをセンターに

const swiper = new Swiper(".swiper", {
  spaceBetween: 32,
  slidesPerView: 1.6,
  loop: true,
  loopAdditionalSlides: 1,
  centeredSlides: true,
  speed: 1000,
  autoplay: {
    delay: 3000,
  },
  breakpoints: {
    // 1025px以上の場合
    1025: {
      spaceBetween: "3.1%",
      slidesPerView: 4.3,
    },
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },

  navigation: {
    nextEl: ".swiper-button-prev",
    prevEl: ".swiper-button-next",
  },
});

HTMLはスライド5枚登録している状態です。

この状態を検証画面でみると、5枚のグループが3つ作成されていて、2つ目のグループがずっとループしている状態でした。

2つ目のグループには、以下クラスが使用されており、

 .swiper-slide-active
 .swiper-slide-prev
 .swiper-slide-next

1つ目と3つ目のグループは、以下クラスが使用されていました。

 .swiper-slide-duplicate-active
 .swiper-slide-duplicate-prev
 .swiper-slide-duplicate-next

問題のあった「2周目1枚目」を見てみると、
2周目1枚目👉3つ目のグループの1枚目
2周目2枚目👉2つ目のグループの2枚目（3つ目のグループの2枚目ではない！！）
になっていることが分かりました。

「2周目1枚目→2枚目に切り替わるタイミング」で、
クラス名が「.swiper-slide-active」から　「 .swiper-slide-duplicate-prev」に変わっていました。これが不具合の原因だと思いました。

結果、duplicateのクラスも追加することで「2周目1枚目→2枚目に切り替わるタイミングでのカクツキ」は改善されました！🎉

▼変更前

  // スライドの動きに関する記述
  .swiper-slide-active {
    transform: translate(0, 5rem);
  }
  .swiper-slide-prev,
  .swiper-slide-next {
    transform: translate(0, 2.5rem);
  }

▼変更後

  // スライドの動きに関する記述
  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: translate(0, 5rem);
  }
  .swiper-slide-prev,
  .swiper-slide-next,
  .swiper-slide-duplicate-prev,
  .swiper-slide-duplicate-next {
    transform: translate(0, 2.5rem);
  }

Swiper loopの構造

関連