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

RELEASE / 2024.7.16 UPDATE / 2024.07.17

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するのを忘れないようにしましょう。