Swiper Web制作 スライダー

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

あわせて読みたい
【jQuery不要】スライダープラグイン Swiper.jsの使い方
【2023年最新Ver9】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説

続きを見る

またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

あわせて読みたい
【Swiper】カスタマイズ用オプションまとめ一覧
【Swiper】カスタマイズ用オプションまとめ一覧

続きを見る

2023年12月31日まで!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1100部突破!レビュー570件!

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の設定に一行コードを追記するだけでいいので簡単ですが、注意点としてはdisableOnInteractionautoplayのオプションなので、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記事一覧

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

2023年12月31日まで!5大無料特典あり🎁

販売ページとレビューを見てみる

-Swiper, Web制作, スライダー