Swiperでスライダー実装

先日、久しぶりにスライダーを実装する案件がありました。
こういう時はいつもお世話になっている「bxSlider」です。

ところが今までの案件とは少し事情が違いました。
なんとスライド数が200以上あります。
一気に最後の方までスライドさせたいこともあるのでページネーションは必須ですが、いつもの丸いページネーションだと表示が大変なことになります。
クリックしてもどれが何なのかわかりません。

つまり今回はページネーションの「丸」をクリックさせるのは現実的ではありません。
スクロールバーなどでドラッグさせるようにするべきです。

もう一つbxSliderで困ったこととして、スマホのスワイプ動作です。
200個もあるとスワイプ動作で慣性をつけて一気に多数をすっとばしてスライドせたいです。
ところがbxSliderだとなぜか一個づつで止まってしまってもどかしい感じがしました。

最初はドラッグ操作に合わせてスクロールするものを自作していたのですが、意外と計算が面倒で、スライドの最後まで行くとどうしてもズレが出てしましました。
それともう一つ大変だったのが、「スライドが終了した時に必ずスライドを二つだけ表示した状態にする」という条件でした。
要するにカルーセルで常に2枚表示したいわけです。
スワイプ後に中途半端な位置で止まって3枚見えていたとしても、グリッドに吸着するように、自動で左右どちらかに移動する動作を実装しなければいけません。
結局半日ぐらいかけたのですがあきらめて帰宅しました。

今朝、出勤すると同時に何気なく「スワイプ スライダー」でググりました。
するとあっけなく見つかりました。「Swiper」です。

http://idangero.us/swiper/

結論から言うと上記の条件をすべて満足するスライダーでした。感激です。
ドラッグでの移動もすぐできましたし、スワイプ終了後に吸着させる動作も簡単!

bxSliderはいろいろ細かいカスタマイズが可能で、本当に便利でした。
しかし時代は2017年です。
もはやIE7,8なんて考えなくていいんですよね。
そろそろ卒業かもしれません。