Swiper.jsがアプデされて表示が崩れていた

今携わっている案件で、投稿をスライド表示させたいということで導入していたSwiper.js。
今日、客先レビューを控えて最終点検……と思ったら表示が崩れてて焦る焦る。

とりあえずこんな時はTwitterが早い！！
ということで検索したら速攻でヒット。

【Swiper.jsを使っているサイトは要確認】
8月後半のプラグイン側のアプデにより、スライダーのレイアウトが崩れる可能性があります。

▼解決策https://t.co/ej2aAwNK4W

エラー放置。ダメゼッタイ。#swiper #デイトラ

— だい | Webデザイナー&エンジニア (@dai_dande) August 27, 2021

ありがとうTwitter……！！ということで修正。

これが修正前。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    ...
  </div>
</div>

修正後はこちら。三層構造の1番目、「swiper-container」を「swiper」に変更する。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    ...
  </div>
</div>

footer.phpに記載しているjsも修正。クラス名が変わったので。
こちらは変更前。

<script>
  let mySwiper = new Swiper('.swiper-container', {

変更後。

<script>
  let mySwiper = new Swiper('.swiper', {

無事客先レビューに間に合い、今絶賛、デザイナーがプレゼン中です。
いい反応いただけたら嬉しいなあ…

※詳細は以下参照。

https://swiperjs.com/migration-guide