Programming

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

再生ボタン

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

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

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

ざっくり全体のコード

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

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

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

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

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

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

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

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

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

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