【Swiper】クリック・スワイプ・ドラッグでスライダーの自動再生を止めずに継続させる方法

Swiperで矢印クリックしたら自動再生が止まっちゃったけど、止めないように出来る？

Swiperのスライダーで自動再生を設定した時、前後の矢印をクリックしたり、スワイプ・ドラッグをすると自動再生は止まってしまいます。

しかし、これを止めずに継続させるオプションがあるので、ご紹介します。

Swiperの基本的な使い方についてはこちらの記事を参照下さい。

Swiperでクリック・スワイプ・ドラッグでスライダーの自動再生を止めずに継続させる方法

まずは、基本となるスライダーを見てみます。

一旦、クリックやスワイプをせずに、自動再生されるのを確認して下さい（クリックなどしてしまった場合は右下の『Rerun』をクリック）

See the Pen
Swiper：自動再生あり（クリックで自動再生ストップ） by junpei (@junpei-sugiyama)
on CodePen.

この状態で矢印をクリックしたり、ドラッグ・スワイプをすると自動再生が止まるのも確認してみましょう。

次に、こちらが自動再生が止まらないように設定したスライダーです。

See the Pen
Swiper：自動再生あり（クリックで自動再生ストップしない） by junpei (@junpei-sugiyama)
on CodePen.

今度は矢印をクリックしても、スワイプ・ドラッグをしても、自動再生は再開します。

それでは、コードの解説をしていきます。

JavaScriptのコード

基本となるスライダーの解説は割愛して、今回のポイントとなるコードだけご紹介します。

まず、自動再生が止まってしまう方のJavaScriptはこちらです（ページネーション・矢印のコードは省略）

const swiper = new Swiper(".swiper", {
  loop: true, // ループさせる
  speed: 1500, // 少しゆっくり(デフォルトは300)
  autoplay: { // 自動再生
    delay: 1500, // 1.5秒後に次のスライド
  },
});

そして、こちらが自動再生を継続させる方です。

const swiper = new Swiper(".swiper", {
  loop: true, // ループさせる
  speed: 1500, // 少しゆっくり(デフォルトは300)
  autoplay: { // 自動再生
    delay: 1500, // 1.5秒後に次のスライド
    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
  },
});

追記されたのはdisableOnInteraction: falseだけです。

これは、デフォルトではtrueになっているので、falseにすればOKです。

まとめ：Swiperで自動再生が止まる対策は『disableOnInteraction: false』を書けばOK

今回は、Swiperの設定に一行コードを追記するだけですが、注意点としてはdisableOnInteractionはautoplayのオプションなので、autoplayの外に書かないように気をつけましょう。

この書き方だと動作しません。

const swiper = new Swiper(".swiper", {
  disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
  autoplay: { // 自動再生
    delay: 1500, // 1.5秒後に次のスライド
  },
});

ちゃんとの中に書きましょう。

const swiper = new Swiper(".swiper", {
  autoplay: { // 自動再生
    delay: 1500, // 1.5秒後に次のスライド
    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
  },
});

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

投げ銭で応援する🐶