copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2021/10/08

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

Written by Isamu Mizuno

  • JavaScript

INDEX

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

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

    そもそも、swiper.jsでスライダーが流れ続ける仕組みとして
    .swiper-wrappertransform: translate3dtransition-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を使用しています。
    他のバージョンではクラス名、オプションの記述の仕方に違いがあるのでご注意ください。
    以上、参考になれば幸いです。

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View