🚧

Swiper.js 7 への Upgrade で発生したスライダーの崩れを修正

2 min read

先日 8/ 25 にスライダーを軽量簡単に実装できる人気ライブラリ Swiper.js がアップグレードされました。

アップグレードで発生した現象

恥ずかしながら、このアップグレードを watch しておらず、運営している Web サイトで画面左に大きな余白が出ていたことに気づきました。

発見した当日は作業時間が取れず、取り急ぎ、応急措置として CSS でスタイルをあてて、急場をしのいだのですが、それをようやく修正したので、その内容をまとめました。

Swiper.j 7 アップグレード対応

  1. HTML のクラス swiper-containerswiper に変更
    • これは公式ドキュメントの Migration Guide to Swiper 7 にもある通りです
    • ここで私が忘れてしまっていたのが、 Swiper の初期化に .swiper-container を指定していたことでした。これも .swiper に変更します
    // .swiper-container を .swiper に変更
    const swiper = new Swiper('.swiper', {
      // 中略
    });
    
  2. CDN から利用している場合は src を Swiper 7 以降に変更
    • 詳細は公式ドキュメントにあるので、 Getting Started With Swiper を参照ください
    • この時点でボタンなどの挙動はアップグレード前と変わらない状態になりました。一方で、引き続き、画面左に大きな余白が残ったままでした
  3. Swiper の初期化パラメータを変える
    • 特にコンソールにもエラーは出ておらず、調べてみると、一番最初の swiper-slide の width の値が異常に設定されていました
    • ここでようやく初期化のパラメータが変わっているのかも知れないと思って、調べたところ centeredSlides: true, にしていたことが原因でした
      • これによりアクティブな swiper-slide が画面真ん中に設定され、左に余白ができたのでした
    • このパラメータをオフにすると、画面左の余白はなくなりました
    const swiper = new Swiper('.swiper', {
      cssMode: true,
      // centeredSlides: true,
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      mousewheel: true,
      keyboard: true,
      breakpoints: {
        320: {
          slidesPerView: 1.1,
        },
        640: {
          slidesPerView: 2.3,
        },
        900: {
          slidesPerView: 3.3,
        },
      }
    })
    

念のため、こちらで使っている他のパラメータも調べてみましたが、特に変更は入っていませんでした。

なお、公式ドキュメントの Migration Guide to Swiper 7 に Update したパラメータが出ていますが、もしアップグレード前に戻らないようであれば、一度 Swiper API で使っているパラメータを確認してみるとよいかも知れません。

他にも挙動が変わってしまっている箇所があれば、随時更新します。

Discussion

ログインするとコメントできます