【Swiper】読み込み時にスライドがばらつく・チラつく問題を防ぐ方法

JavaScript製の人気スライダープラグイン「Swiper」を使用していると、読み込み時にスライドがばらついたり、チラついてしまうことがあります。

特に、JavaScriptの初期化よりも先にDOMが描画されてしまうと、レイアウト崩れや高さの乱れが発生し、ユーザー体験を損ねる原因になります。

この記事では、Swiperの読み込み時にスライドがばらつかないようにする具体的なCSSと初期化のタイミングについて、わかりやすく解説します。

⸻

結論：CSSと初期化タイミングをセットで調整する

1. swiper-containerに一時的に非表示スタイルを適用

まず、CSSでSwiperの初期化が完了するまでスライダーを非表示にします。
Swiperの機能で、
スライドの読み込みが完了したら、.swiper-containerに.swiper-initializedがクラスとして付与されるので、それを利用します。

//SCSSの設定例

.p-fv-slide { //.swiper-containerにつけているクラス名

  /* スライドのチラつき防止 */
  &.swiper-container {
    visibility: hidden;      /* 要素を見えなくする（高さは保持） */
    overflow: hidden;        /* 念のためスライドのはみ出しを防止 */
  }

  &.swiper-container.swiper-initialized {
    visibility: visible;     /* Swiperの初期化後に表示 */
    overflow: visible;       /* 非表示のままだと両端のスライドが切れるので表示にする */
  }

}

display: noneでは高さがなくなるためレイアウトが崩れる可能性があります。
代わりにvisibility: hiddenを使うことで高さを維持したまま非表示にできます。

2. Swiperは DOMContentLoaded で初期化する

CSSで非表示にした要素を、DOMが読み込まれたタイミングで初期化するようにします。

document.addEventListener("DOMContentLoaded", function () {
  new Swiper(".swiper-container", {
    // Swiperのオプション設定
  });
});

window.addEventListener("load") は遅延が発生するため、
Swiperの初期化が遅れてしまい、スライドの表示自体が遅くなります。

補足：ローディングアニメーションを加えるとより自然に

非表示にしてから表示する切り替えの一瞬が気になる場合は、ページ読み込みの時にローディングアニメーションを挟むと、より自然なUIになります。

⸻

まとめ：Swiperのばらつき防止のポイント

Swiperの読み込み時のばらつきをしっかり対策し、ユーザーにストレスのないUIを提供しましょう！