【swiper.js】停止ボタン付けたい【autoplayはtureで】

再生ボタン
再生ボタン

目次

スライダーを実装するときはswiper.jsを使っています。
公式:https://swiperjs.com/

今回は、自動で再生させておくオプションの『autoplay』と共に『停止/再生ボタン』も付けたいというご要望があったので調べました。

swiper.jsのバージョンは 5.2.1 を使用しました。

ざっくり全体のコード

[box02 title=”こちらの記事を参考にさせていただきました”]

jQueryなしで動くレスポンシブ対応スライダー「swiper」に停止ボタンをつける

[/box02]

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
  </div>

  <div class="pagination-wrap">
    <p class="stopbtn stop"></p>  <!-- 停止ボタン -->
    <div class="swiper-pagination"></div>
  </div>
</div>

今回はページネーションの横に停止/再生ボタンをつけます。

.stopbtn {
    cursor: pointer;
    width: 20px;
    height: 15px;
}

.stopbtn.stop {
  position: relative;
  display: inline-block;

  &:before, &:after {
    position: absolute;
    top: 0;
    content: '';
      width: 3px;
      height: 15px;
    background-color: pink;
  }

  &:before {
    left: 5px;
  }

  &:after {
    right: 5px;
  }
}

.stopbtn.start {
  position: relative;
  display: inline-block;

  &:before {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 14px;
    border-color: transparent transparent transparent pink;
  }

  &:after {
    display: none;
  }
}

ボタン部分のスタイルのみ抜粋しています。

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 2,
    loop: true,
    autoplay: { delay: 3000 },  ←ここで自動再生を設定しています。
    centeredSlides: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    }
});

$(window).on('load', function() {
    $('.stopbtn').on('click', function() {
        var _class = $(this).attr('class');
        if (_class == 'stopbtn stop') {
            $(this)
                .addClass('start')
                .removeClass('stop');
                swiper.autoplay.stop();  ←注1
        } else {
            $(this)
                .addClass('stop')
                .removeClass('start');
                swiper.autoplay.start();  ←注2
        }
    });
});

↑これでOKです。
初めにご紹介した参考記事の記述から変更が必要で、それが上記の注1注2になります。

元の記事はこのように書かれていました↓

swiper.stopAutoplay();
swiper.startAutoplay();

これでやってみた所、swiper.stopAutplay()swiper.startAutplay()定義されてないよというエラーが発生したため、おやおや?と思い試行錯誤。

swiper.jsファイルの中から『オートプレイを停止する/再生する』ということが書かれているであろう箇所を探してたどり着きました。

swiper.jsのファイルからautoplay.startを探したスクリーンショット

参考にした記事主様が記事を書かれたのは今からおよそ2年半前。
私がこの記事を書いている現在は2020年1月1日です。

swiper.jsのバージョンがアップデートされている為、コードの書き方が少々違うのが原因でした。