Swiper.js にて、停止したスライダーを再び始めからスライドするボタンを設置したい

Question

スライダーのプラグイン「Swiper」（ver.5.3.8）を利用しています。
https://swiperjs.com/

下記のソースコードにて、自動再生でスライドしていき、最後のスライドに達すると停止するようスライダーを作成しました。

そこで、「1枚目のスライドに戻ってまた始めから自動再生を始めるボタン」を設置したいと考えているのですが、
どのようにすると良いでしょうか？

お力添え頂けると幸いです。よろしくお願いいたします。

<div class="swiper-container" id="slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide" id="slide01">
      スライド1のコンテンツ
    </div>
    <div class="swiper-slide" id="slide02">
      スライド2のコンテンツ
    </div>
    <div class="swiper-slide" id="slide03">
      スライド3のコンテンツ
    </div>
  </div>
</div>

var recruitmv = new Swiper('#slider', {
  slidesPerView: 1,
  spaceBetween: 0,
  effect: 'fade',
  speed: 2000,
  loop: false,
  autoplayStopOnLast: true,
  allowTouchMove: false,
  autoplay: {
    delay: 6000,
    disableOnInteraction: false,
  },
});
recruitmv.on('reachEnd', function(){
  recruitmv.autoplay = false;
})

Comments

[m.ts10806]

プラグイン管轄外のイベントでしたら自分でボタンを設置してイベント書いていく必要があるかと思うのですが、どの程度調べ、何を試したのでしょうか。

Answer 1

ドキュメントのほうに使えそうなメソッドがあるのでそちらを実行するように組んでみては。

例えば

mySwiper.slideTo(index, speed, runCallbacks);

Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.
index - number - index number of slide
speed - number - transition duration (in ms). Optional
runCallbacks - boolean - Set it to false (by default it is true) and transition will not produce transition events. Optional