Swiperをスマホだけで有効にし、PCでは普通のリスト表示（横並び）にするには？

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

同じページに複数のSwiperがある場合、destroy() がエラーになります。

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

リサイズするたびにSwiperが初期化されて挙動が重くなります。

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

Swiper v11 を使っていますが、古い記事のコードが動きません。

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

軽量スライダーSwiperでスマホ（SP）のみスライダー表示にする方法（複数対応）

FAQ

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

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

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