
スライダーと言えば、昔からbxSliderを利用してWEBサイトを構築していましたが・・・慣れや便利さに加え、不満なところも目をつむって今まで利用していました・・・
bxSliderの利用を！ついに諦めることにしました。
１番の理由は不具合が多くあることです。しかも開発が止まっているので、バージョンアップで改善することを期待できないからです。
使い勝手などは、その都度調べながらJavascriptやCSSでカスタマイズしてきていましたが・・・それもだんだん面倒になってきました。
とどめは、スマートフォンでの挙動に問題があったことです。
bxSliderのスライド内のリンクが効かなくなったので、いろいろな情報をもとに修正すると・・・
今度はページ移動のスワイプ処理でリンクが発動してしまう不具合が発生・・・
もう何年も放置されているbxSliderに見切りをつけて、別のスライダーライブラリを試して見ることにしました。
乗り換えの候補は、１番の人気であるSlickとSwiperの2つです。
それぞれを調べて見ると、Slickもここ数年更新が止まっているようです。
そのため、同じくらい人気があるSwiperを試してみることにしました。
ついでにbxSliderからの移行がどの程度困難なのかも調べてみました。
bxSliderからSwiperへ移行する
基本的には、CSNでサクッとライブラリを読み込みます。
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.7/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.7/swiper-bundle.min.js"></script>
次に、コンテナにスライダーとなる画像をセットすればOKです。基本的な構成は、bxSliderと同じなので移行はとても簡単です。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="xxxxx"><img src="xxxxx"></a></div>
<div class="swiper-slide"><a href="xxxxx"><img src="xxxxx"></a></div>
<div class="swiper-slide"><a href="xxxxx"><img src="xxxxx"></a></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination swiper-pagination-black"></div>
</div>
デフォルトのスライダーを表示するだけなら、とても簡単に移行が完了します。
new Swiper( '.swiper-container', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
speed: 1000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination', clickable: true
},
scrollbar: {
el: '.swiper-scrollbar',
},
slidesPerView: 1,
breakpoints: {
768: { slidesPerView: 1 },
980: { slidesPerView: 1 },
1200: { slidesPerView: 1 }
}
} );
ただ、各機能についてもデフォルトで用意されているので、パラメーターの設定値さえ覚えてしまえば、bxSliderと同じ機能、動作をさせることはとても簡単でした。
HTMLの構成もとてもシンプル！オプションの指定で殆どのことが実現できる機能の豊富さ！jQueryも必要ないので動作も軽いイメージを受けます。各スライダー画像のロード時とかのモッサリ感がなくなりました！
bxSliderからの移行はとても簡単でした。オプションの設定方法さえ覚えてしまえば、次からは1、2分程度で移行が完了できると思います。
今まで、新しいものにチャレンジするのが面倒でbxSliderを使い続けていましたが、これからはSwiperを積極的に利用していこうと思います。
時間はかなりましたが、勉強になった１日でした。
続く・・・