【2021年8月】Swiper.jsで急にレイアウト崩れ（横スクロール）が起きた時の解決策

2021年8月の後半、突然Swiper.jsのレイアウトが崩れて横スクロールするようになってしまいました。

すでに納品済みのサイトでこのような事象が起きて、自分のローカル環境でも崩れており、まさか...と思ったら、どうやらSwiper.jsのアップデートが原因だったみたいです。

今回はその解決策を解説します。

結論

解決策1: クラス名を変える

<div class="swiper-container" id="xxx">
  <div class="swiper-wrapper">

↓

<div class="swiper" id="xxx">
  <div class="swiper-wrapper">

上記のように、Swiperの親要素のクラスswiper-containerをswiperに変えるだけです。

解決策2: 読み込ませているjsを変える

レイアウト崩れが起きている方は、おそらくCDN経由で「最新バージョンやおすすめバージョン」を読み込ませているはずです。

それを、6系のSwiperを読み込ませるように修正すると今回の事象は解決します。

// 最新バージョンを読み込ませている
// （srcは人によって多少違う可能性があります）
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

↓

// バージョン6.8.4を指定して読み込ませる
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js"></script>

※CSSも最新バージョンなどを読み込ませている場合は、jsとバージョンを揃えてあげましょう

https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.css

解説

以下はSwiper.jsの更新履歴です。

https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md

このページで「core swiper-container class to swiper」のワードで検索をすれば該当箇所を確認できます。

7.0.0 (2021-08-25)のアップデートで、Swiperの親要素で使用するクラス名がswiper-containerからswiperに変更されたのがレイアウト崩れの原因でした。

この変更により、Swiperのjsがそもそも実行されていなかったみたいです。

今後の対策

今回の事象は、CDN経由で「最新バージョンやおすすめバージョンを読み込ませる」ようにしていると発生してしまいます。

なので、今後もCDN経由で読み込ませたい場合は、バージョンを指定してあげるといいでしょう。