フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【Swiper】スライダーを操作した後に自動再生が止まってしまう時の原因と解決方法

disableOnInteraction
Swiper
バグ
止まる
自動再生

Swiperはスライダーを簡単に作ることが出来る人気プラグインです。
そんなSwiperを使った自動再生で左右の矢印やスワイプをしてスライダーを操作した時、自動再生が止まってしまう事があります。
この記事ではSwiperを操作した後に自動再生が止まってしまう原因と解決方法をご紹介したいと思います。

原因

Swiperの自動再生が止まってしまう原因はdisableOnInteractionのオプション設定に原因があります。

この設定はユーザー操作によってスライダーを移動させた場合、自動再生を止めるというものです。
そしてこの設定のデフォルト値はtrue、つまり有効となっています。

そのため左右の矢印やスワイプでスライダーを操作するとそこで自動再生が止まってしまいます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解決方法

disableOnInteractionの設定をfalseにすることでこの問題は解決します。

autoplay: {
    disableOnInteraction: false
}

disableOnInteractionの設定はautoplayの中に記述します。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

バージョンによる違い

確認したところ2024年7月現在の最新バージョンのv11.1.5はdisableOnInteractionの設定はデフォルトがfalseになっているので何も設定変更は必要ありません。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

Swiperの公式ドキュメントを見るとdisableOnInteractionの設定はtrueと記載されていますが、実際に仕様してみるとfalseになっていました。

まとめ

いかがでしたか?
バグでは無くSwiperの設定によるものですが、自動再生が止まってしまうと焦りますよね。
Swiperを自動再生させる場合は、disableOnInteractionの設定をfalseするのを忘れないようにしましょう。