スワイプできる無限ループスライダーを実装する【Swiper】

こんにちはミズノです。
swiper.jsの話になりますが無限に流れ続けるループスライダーを実装する際にはallowTouchMove: falseでスワイプ切ることがセットでした。
ですが先日スワイプできるようにしてほしいとの要望がありallowTouchMove: trueにしてスワイプしてみるとスワイプ後のスライダーの速さが変化してしまうためカスタマイズする必要がありました。
今回はスワイプできる無限ループスライダーのカスタマイズを紹介したいと思います。(本記事執筆使用バージョン4.5.1)

スワイプ後の挙動について

そもそも、swiper.jsでスライダーが流れ続ける仕組みとして
.swiper-wrapperにtransform: translate3dとtransition-durationがセットされ、1枚のスライドが通過する毎にtransform: translate3dが次のスライドの位置に更新されることで動いています。

例.スライドの横幅が800pxだった場合
translate3d(0px, 0px, 0px)→translate3d(-800px, 0px, 0px)→translate3d(-1600px, 0px, 0px)
こんな感じでスライドが通過する毎に値が更新されていきます。

しかし、スワイプするとtransform: translate3dの値がスワイプ後の位置に更新されるため
translate3d(0px, 0px, 0px)→translate3d(-3223px, 0px, 0px)
のような値になり、今まで800pxに対してtransition-durationの秒数を設定したところにスワイプ後の値になるためスライダーの速さが変わってしまうようでした。

というわけで、スワイプ後に現在位置からスライド1枚分の幅をプラスさせた値を計算しtransform: translate3dの値をを更新することで解決すると考えました。

環境

Swiper.jsの読み込みとHTMLは下記の記事を参考にしてください。
記事の4.無限ループスライダーをベースにjsの記述を追加しています。
Swiper.jsのカスタマイズ紹介

スワイプできる無限ループスライダー

See the Pen swiper demo6 by mizuno (@mizuno_evo) on CodePen.

touchEndでクリックまたは指が離れた時にイベントを発生させます。
getTraslate = mySwiper.getTranslate()でスライドの現在位置を取得。
slideWidth = document.querySelector('.swiper-slide-active').offsetWidthでスライドの横幅を取得。
mySwiper.setTranslate(getTranslate - slideWidth)でtransform: translate3dを更新。
mySwiper.setTransition(14000)でtransition-durationを更新。

さいごに

本記事ではIEを考慮しているためバージョン4.5.1を使用しています。
他のバージョンではクラス名、オプションの記述の仕方に違いがあるのでご注意ください。
以上、参考になれば幸いです。