<…"> swiper自動再生の一時停止と再開 | BLOG|ホームページ制作 Brick Plan【ブリックプラン】

2025.08.10

JavaScript

swiper自動再生の一時停止と再開

デモページはこちら

swiper.jsでスライドを自動再生させ、ボタンのクリックで一時停止と再開を切り替えます。
htmlのコードは以下の通りです。

<div class="swiper-container js-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<button class="btn-stop">一時停止</button>

JavaScriptのコードです。
swiperのautoplay.runningプロパティで自動再生が有効か確認し、有効ならautoplay.stop();で停止、無効ならautoplay.start();で再開します。

const autoplayToggleButton = document.querySelector('.btn-auto-toggle');

var swiper01 = new Swiper('.js-slider', {
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

autoplayToggleButton.addEventListener('click', function() {
  if (swiper01.autoplay.running) {
    // 自動再生が実行中の場合、停止する
    swiper01.autoplay.stop();
    autoplayToggleButton.textContent = '再開';
  } else {
    // 自動再生が停止中の場合、開始する
    swiper01.autoplay.start();
    autoplayToggleButton.textContent = '一時停止';
  }
});

関連記事

2020.10.27

JavaScript

JavaScriptで文字列を検索(indexOf・search・match・test)

デモページはこちら JavaScriptで文字列を検索するメソッドのまとめです。それぞれ記述の仕方と戻り値に特徴があります。 以下のhtmlの構造でテストします…

2020.10.17

JavaScript

swiper.jsのオプションdirectionにverticalを指定して縦方向のスライダーを実装

デモページはこちら swiper.jsのオプションdirectionにverticalを指定して、縦方向のスライダーを実装します。htmlのコードは以下の通りで…

2020.10.26

JavaScript

JavaScriptのpushメソッドで配列に要素を追加・joinメソッドで配列の要素を連結

デモページはこちら JavaScriptのpushメソッドで配列に要素を追加し、joinメソッドで配列の要素を連結して文字列を生成します。 以下のhtmlの構造…

2020.09.02

JavaScript

JavaScriptライブラリ layzr.jsの使い方

画像の遅延読み込みができるJavaScriptライブラリlayzr.jsの使い方です。ウィンドウ表示領域外の要素や画像は非表示もしくは代替画像にしておいて、スク…

2020.10.16

JavaScript

swiper.jsのオプションbreakpointsで表示スライド数を切り替え

デモページはこちら swiper.jsのオプションbreakpointsで表示スライド数を切り替えます。 htmlのコードは以下の通りです。クラス名swiper…

上に戻る