English

Autoplay Toggle

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

v3用のドキュメントを参照しています

はじめに

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

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を初期化し、先ほど作成したボタンをスクリプトから取得します。ここで、トグルボタンの機能と矛盾するpauseOnHoverとpauseOnFocusオプションは、いずれも無効にしておく必要があります。たとえば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