Swiperでオートプレイの切り替えボタンをつける方法

Swiperは、スライダーを簡単に実装できる人気のライブラリです。今回は、そのSwiperのオートプレイ機能をユーザーが自由にON/OFFできるようにするボタンの実装方法を解説します。

1つのボタンでON/OFFを切り替える

一つのボタンをクリックするたびに、オートプレイの開始と停止が切り替わります。

HTMLの準備

まず、Swiperのコンテナと、切り替え用のボタンをHTMLに用意します。

<div class="swiper-container my-swiper"> <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></div><button id="toggleAutoplayBtn">オートプレイ ON/OFF</button>
HTML

JavaScriptでの制御

Swiperのインスタンスを取得し、autoplay.runningプロパティで現在の状態を判定します。
オートプレイが実行中であればswiper.autoplay.stop()で停止させ、そうでなければswiper.autoplay.start()で開始させます。

const swiper = new Swiper('.my-swiper', { autoplay: { delay: 3000, disableOnInteraction: false, // ユーザー操作後も自動再生を継続 },});const toggleAutoplayBtn = document.getElementById('toggleAutoplayBtn');toggleAutoplayBtn.addEventListener('click', () => { if (swiper.autoplay.running) { swiper.autoplay.stop(); console.log('オートプレイを停止しました'); } else { swiper.autoplay.start(); console.log('オートプレイを再生しました'); }});
JavaScript

2つのボタンでON/OFFを切り替える

「再生」と「停止」のボタンを別々に用意したい場合。

HTMLの準備

まず、Swiperのコンテナと、切り替え用の2つのボタンをHTMLに用意します。

<div class="swiper-container my-swiper"> <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></div><button id="startAutoplayBtn">再生</button><button id="stopAutoplayBtn">停止</button>
HTML

JavaScriptでの制御

それぞれのボタンに、swiper.autoplay.start()とswiper.autoplay.stop()を割り当てます。

const swiper = new Swiper('.my-swiper', { autoplay: { delay: 3000, disableOnInteraction: false, },});const startAutoplayBtn = document.getElementById('startAutoplayBtn');const stopAutoplayBtn = document.getElementById('stopAutoplayBtn');startAutoplayBtn.addEventListener('click', () => { swiper.autoplay.start(); console.log('オートプレイを再生しました');});stopAutoplayBtn.addEventListener('click', () => { swiper.autoplay.stop(); console.log('オートプレイを停止しました');});
JavaScript

応用例：ボタンの見た目を変更する

1つのボタンでON/OFFを切り替える場合、現在の状態をボタンのテキストやアイコンで表現すると、ユーザーにとって分かりやすくなります。

実装例

if文を使って、オートプレイの状態に応じてボタンのテキストを変更します。

const swiper = new Swiper('.my-swiper', { autoplay: { delay: 3000, disableOnInteraction: false, },});const toggleAutoplayBtn = document.getElementById('toggleAutoplayBtn');// 初期状態のテキストを設定toggleAutoplayBtn.textContent = 'オートプレイ ON';toggleAutoplayBtn.addEventListener('click', () => { if (swiper.autoplay.running) { swiper.autoplay.stop(); toggleAutoplayBtn.textContent = 'オートプレイ OFF'; // 停止中に変更 } else { swiper.autoplay.start(); toggleAutoplayBtn.textContent = 'オートプレイ ON'; // 再生中に変更 }});
JavaScript

さらに、CSSでボタンのクラスを付け替えれば、色やアイコンを切り替えることも可能です。

この方法を使えば、よりユーザーフレンドリーなスライダーを実装できます。ぜひ試してみてください。

read next