Swiperは、スライダーを簡単に実装できる人気のライブラリです。今回は、そのSwiperのオートプレイ機能をユーザーが自由にON/OFFできるようにするボタンの実装方法を解説します。
1. 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>
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('オートプレイを再生しました');
}
});2. 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>
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('オートプレイを停止しました');
});応用例：ボタンの見た目を変更する
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'; // 再生中に変更
}
});
さらに、CSSでボタンのクラスを付け替えれば、色やアイコンを切り替えることも可能です。
この方法を使えば、よりユーザーフレンドリーなスライダーを実装できます。ぜひ試してみてください。
