swiper スマホ のみで動かす！destroyとresizeでリサイズ時もバグらないレスポンシブ制御法

ブレークポイントを判定して new Swiper と destroy() を切り替えるJSの実装が必要です。CSS側でもPC時に display: flex; などでスライダー特有のスタイルを打ち消す必要があります。具体的なコードは Swiperでスマホ、PCで切り替える方法 セクションで解説しています。

全てのSwiperに同じクラス名（.swiper）で指定していると、破棄する際に対象が特定できずエラーになることがあります。各要素に IDやユニークなクラスを付与 し、配列で管理するのが正解です。複数のSwiperを切り替える方法 のセクションを参考にしてください。

Windowの resize イベントは高頻度で発生するため、そのまま実装すると負荷がかかります。本記事で紹介している throttle（スロットル）関数 を使い、実行回数を適宜間引く（例：200msごと）ことで、スムーズな切り替えが可能になります。

SwiperはバージョンアップによりCDNのパスや記述方法（ES Modules形式など）が頻繁に変更されます。2025-2026年現在の 最新の読み込み方法 に書き換えることで解決します。