Swiperのスピードが変化しない(汗)時の対処方法
カルーセルやイメージスライダーは、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のオプションが効かなくて困っている方がいましたら、是非お試しください。
↑ 最新版の使い方は、上記のサイトがとても参考になります!
よろしければサポートお願いします。励みになります!