【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はこちらです（ページネーション・矢印のコードは省略）

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記事一覧

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。※ 4月15日に値上げ予定