🚧

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

2021/08/31に公開

JavaScript

swiperjs

tech

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

Release v7.0.0 · nolimits4web/swiper

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

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

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

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

HTML のクラス swiper-container を swiper に変更
- これは公式ドキュメントの Migration Guide to Swiper 7 にもある通りです
- ここで私が忘れてしまっていたのが、 Swiper の初期化に .swiper-container を指定していたことでした。これも .swiper に変更します
```
// .swiper-container を .swiper に変更
const swiper = new Swiper('.swiper', {
  // 中略
});
```
CDN から利用している場合は src を Swiper 7 以降に変更
- 詳細は公式ドキュメントにあるので、 Getting Started With Swiper を参照ください
- この時点でボタンなどの挙動はアップグレード前と変わらない状態になりました。一方で、引き続き、画面左に大きな余白が残ったままでした
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 で使っているパラメータを確認してみるとよいかも知れません。

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

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

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

Discussion