jQuery不要で、豊富な機能があるswiper.js。
パフォーマンスの面の他にも、jQueryの読み込みの手間が省けたことに感動して、一度触って以来、slickスライダーの方がよさそうなとき以外はswiperを使うようになりました。
豊富な機能があるswiperですが、デフォルトでは、slickより簡素化されていて最小限の設定にされていますので、ちょっとしたことでも設定が必要になることがあります。
今回は、ちょっとつまづいてしまいそうな項目の一つについてです。
変更したい動作
自動再生をオンにしていても、マウスオーバーしたり、マウスでスワイプしたり、スマホの場合は指でフリックしたりと、ユーザが操作した後、デフォルトではスライドの自動再生が止まってしまいます。
対処法
disableOnInteractionプロパティ
を設定を変更すると、ユーザが操作しても自動再生を継続させることができます。
デフォルトでは、disableOnInteraction: trueとなっており、ユーザのアクションがあったときに自動再生をdisable(=無効化)するように設定されています。
swiper.jsの公式サイトにはこのような説明があります。
disableOnInteraction | boolean | true |
Set to
https://swiperjs.com/swiper-api#autoplayfalse
and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction
「falseを設定すると、自動再生はユーザーの操作(スワイプ)後に無効にならず、操作後に毎回再起動されます」
次のように、autoplayプロパティの中に記述します。
autoplay: {
disableOnInteraction: false
}