Autoplay Toggle

自動再生の切り替えボタン

はじめに

Splideは自動再生の再生・停止ボタンをサポートしていますが、これらのボタンはそれぞれ独立しています。このチュートリアルでは下の例のように、自動再生を単一のボタンで切り替えるための方法を解説します。

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09

HTML

まず、ボタン用のHTMLを用意します。以下の例ではスタイリングのためボタンを<div>で囲っていますが、必須ではありません。

<div class="splide">
<div class="splide__track">
<ul class="splide__list">
...
</ul>
</div>
<div class="my-autoplay-controls">
<button class="my-toggle-button" type="button">Pause</button>
</div>
</div>
HTML

スクリプトによる制御

Splideを初期化し、先ほど作成したボタンをスクリプトから取得します。ここで、トグルボタンの機能と矛盾するpauseOnHoverpauseOnFocusオプションは、いずれも無効にしておく必要があります。たとえばpauseOnHoverが有効な場合、「停止ボタンを押す前に自動再生が止まる」というおかしな現象が起こってしまいます。

var splide = new Splide( '.splide', {
autoplay : true,
rewind : true,
pauseOnHover: false,
pauseOnFocus: false,
} );
// ボタンを取得
var toggleButton = splide.root.querySelector( '.my-toggle-button' );
JavaScript

自動再生が始まったらボタンのラベルは"Pause"に、逆に停止したら"Play"に切り替わる必要があります。autoplay:playならびにautoplay:pauseイベントを利用すれば、これらの更新すべきタイミングを知ることができます。

var toggleButton = splide.root.querySelector( '.my-toggle-button' );
splide.on( 'autoplay:play', function () {
toggleButton.setAttribute( 'aria-label', 'Pause autoplay' );
toggleButton.textContent = 'Pause';
} );
splide.on( 'autoplay:pause', function () {
toggleButton.setAttribute( 'aria-label', 'Start autoplay' );
toggleButton.textContent = 'Play';
} );
JavaScript

最後に、Autoplayコンポーネントが提供するメソッドを利用して、ボタンが押されたときに自動再生を開始、または停止する処理を実装しましょう。

toggleButton.addEventListener( 'click', function () {
var Autoplay = splide.Components.Autoplay;
if ( Autoplay.isPaused() ) {
// 停止中の場合は再生
Autoplay.play();
} else {
// 再生中の場合は停止
Autoplay.pause();
}
} );
JavaScript

できました! これで最初に示したサンプルのようなトグルボタンの完成です。

補足

もしpauseOnHoverあるいはpauseOnFocusオプションを有効にしたままにしたい場合は、ボタン自体をスライダーの外に配置すると矛盾なく動作します。

<div class="splide">
<div class="splide__track">
<ul class="splide__list">
...
</ul>
</div>
</div>
<div class="my-autoplay-controls">
<button class="my-toggle-button" type="button">Pause</button>
</div>
HTML