こんにちは、りです。
先日Swiper.jsは4.5.0から8.2.4(時点最新)へアップデートされました、（怖いバージョン差😂）、今回はその対応STEPSとバージョンの解説をまとめました。
概要
1.アップグレード対応STEPS:
- STEP1: Swiperのアップデート
- STEP2: クラス名を変える
- STEP3: CSSとJSを読み込ませるように修正する
2.注意点:
- V6.5.1未満場合脆弱性がある
- V5.4.5以降はIE11では対応していなかった
3.参考資料
1.アップグレード対応STEPS
Swiperのリリース情報確認: 2022-06-13にv8.2.4をリリース、v4.5.0は2019-02-22😂.
今回のバージョン差は大きくなってしまいましたから、新旧バージョンの違いを比較するよりも、直接新しいものを使ったほうが早そうと思います。
1.1 Swiperのアップデート
従来の導入方法に従って、今回もYarnというパッケージマネージャーを使いました
- yarnで最インストールする
$ yarn remove swiper #古いパッケージをアンインストールする
$ yarn add swiper #バッケージをインストールする
$ yarn install #開発環境下にインストール
yarn.lockとpackage.jsonを更新されます。
※ package.jsonをテキストエディターで開き、したいバージョンに編集して、yarn installを実行しても良い。
1.2 クラス名を変える
下記のように、HTMLのクラスswiper-containerをswiperに変更する
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
⬇︎
<div class="swiper"> ##ここだけ
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
1.3 8系のCSSとJSを読み込ませるように修正する
- css
【V4】app/assets/stylesheets/該当ページ.scss
@import '/swiper/dist/css/swiper.min';
【V8】app/assets/stylesheets/該当ページ.scss
@import 'swiper/swiper-bundle.min';
- js
【V4】index.js
import Swiper from 'swiper'
【V8】index.js
import Swiper, { Navigation, Pagination } from 'swiper'
2. 注意点
① V6.5.1未満場合は脆弱性があるので、早めにアップグレードして良さそう！
② V5.4.5以降はIE11では対応していなかったけど、2022 年 6 月 16 日（日本時間）にIEのサポートが終了しましたから、最高じゃん