Swiper.jsがIEで動かない時の対処法

カルーセルスライダーを簡単に実装できるJavaScriptライブラリのSwiper.js。

https://swiperjs.com/

 

とある案件でIEで動かない。ということがあったので、その時の対処法をまとめました。

対処法といっても至ってシンプルです。

Swiper.jsは5系以降ではIE非対応

Swiper.jsは5系以降、IEはサポート対象外となっています。

なので、4系の中で一番新しい4.5.1を読み込ませましょう。

※4系、5系などはバージョンのことです

 

// CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">

// JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

もちろん、CDNではなく、ローカルファイルとして読み込ませるでもOKです。

 

たったこれだけでIEでも動くようになります。

注意点

5系から4系にバージョンダウンさせることで、5系には存在しているけど4系には存在しないオプションを設定していたりすると、エラーになる場合があります。

なので、もし4系に変更してもIEでうまく動かない場合は、一度オプションをすべて削除して、シンプルな状態で動作チェックをしてみてください。

まとめ

Swiper.jsに限らず、ライブラリには対応するブラウザ、対応しないブラウザがあります。

IEは正式にサポート終了勧告が出たので、今後様々なライブラリがIEを非対応にする可能性もあります。

なので、ライブラリを使用する際は対応ブラウザをしっかりとチェックするクセをつけましょう。