swiper.jsでマウスで触った後に自動再生が止まってしまうときの対処法（自動再生を継続させる）

MW WP Form(WordPress)でデイトピッカーが動かないときの対処法

2022.01.17

WordPressの自動更新を止める方法を紹介

2022.01.19

VScode 便利なショートカット 文末を選択

2022.01.19

jQuery不要で、豊富な機能があるswiper.js。

パフォーマンスの面の他にも、jQueryの読み込みの手間が省けたことに感動して、一度触って以来、slickスライダーの方がよさそうなとき以外はswiperを使うようになりました。

豊富な機能があるswiperですが、デフォルトでは、slickより簡素化されていて最小限の設定にされていますので、ちょっとしたことでも設定が必要になることがあります。
今回は、ちょっとつまづいてしまいそうな項目の一つについてです。

変更したい動作

自動再生をオンにしていても、マウスオーバーしたり、マウスでスワイプしたり、スマホの場合は指でフリックしたりと、ユーザが操作した後、デフォルトではスライドの自動再生が止まってしまいます。

対処法

disableOnInteractionプロパティ

を設定を変更すると、ユーザが操作しても自動再生を継続させることができます。

デフォルトでは、disableOnInteraction: trueとなっており、ユーザのアクションがあったときに自動再生をdisable（＝無効化）するように設定されています。

swiper.jsの公式サイトにはこのような説明があります。

Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction
「falseを設定すると、自動再生はユーザーの操作（スワイプ）後に無効にならず、操作後に毎回再起動されます」

https://swiperjs.com/swiper-api#autoplay

次のように、autoplayプロパティの中に記述します。

autoplay: {
        disableOnInteraction: false
    }