カルーセルやイメージスライダーは、Webサイトの実装では欠かせないUIになっていますよね。5年前くらいまでは、jQueryのBxsliderやSlickなどを使用していました。

jQueryなしで実装可能なSwiper.js

jQueryいつまで頼ってる問題に対して、後ろめたさを抱き、最近というか5年前程からSwiperを使うようになりました。

npmも用意されているので、テンプレートにも気軽に取り入れてます。

とてもオプション豊富なSwiperですが、スピードや自動再生のオプションが時々（常に？）効かなくなる事案が発生しました。

Swiperの一部オプションが効かない現象

特にLPページなどペライチで作成する場合などは、CDNのコードを読み込むケースが大半です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>

上記のように、以前から3.4.1系を使ってました。

バージョンを新しくしたらどうだろ？？

そう思い、最新の4系や5系に差し替えたら、無事スピードなどのオプションが正常に動きました！

Swiper最新版の使用はこちら

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

最新版に差し替えて、カルーセルを試しましたが、一部問題が発生。それはページネーション。

pagination: '.swiper-pagination',

これまでならこの一行で問題ありませんでしたが、ページネーションが表示されない現象が起こりました。

そこで、下記の記述に変更したら直りました。

pagination: {
   el: '.swiper-pagination',
},

同じ現象でお困りの方がいるかどうかわかりませんが、Swiperのオプションが効かなくて困っている方がいましたら、是非お試しください。

↑ 最新版の使い方は、上記のサイトがとても参考になります！