English

Autoplay

自動再生

再生・停止切り替えボタン

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

自動再生を有効にする場合、再生・停止用のボタンも同時に提供することを検討してください。これは、アクセシビリティを担保するためにWCAGとして定められている要件のうちの一つです。

再生・停止ボタンを追加するには、次のようなHTMLを追記してください。

<section class="splide">
  <div class="splide__slider">
		<div class="splide__track">
			<ul class="splide__list">
				<li class="splide__slide">Slide 01</li>
				<li class="splide__slide">Slide 02</li>
				<li class="splide__slide">Slide 03</li>
			</ul>
		</div>
  </div>


  <button class="splide__toggle" type="button">
	  <span class="splide__toggle__play">Play</span>
	  <span class="splide__toggle__pause">Pause</span>
  </button>
</section>
HTML

自動再生中は、<span class="splide__toggle__play">が表示され、停止中は<span class="splide__toggle__pause">に切り替わる仕組みになっています。 <span>の代わりに、他のインライン要素、例えば<img>や<svg>なども使用できます。

<button class="splide__toggle" type="button">
  <svg
    class="splide__toggle__play"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="m22 12-20 11v-22l10 5.5z"/>
  </svg>
  <svg
    class="splide__toggle__pause"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="m2 1v22h7v-22zm13 0v22h7v-22z"/>
  </svg>
</button>
HTML

プログレスバーの表示

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

プログレスバーを表示するには、次のようなHTMLを追記してください。プログレスバーはルート要素か、あるいはスライダー要素の直下に配置する必要があります。

<div class="splide">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
  </div>


  <div class="splide__progress">
		<div class="splide__progress__bar">
		</div>
  </div>
</div>
HTML

splide-core.min.cssを使用している場合は、スタイルを追記する必要があります（そうしないと高さが0のため見えません）。

.splide__progress__bar {
  height: 3px;
  background: #ccc;
}
CSS

プログレスは自動再生が中断するたびに0にリセットされます。resetProgressオプションをfalseにすると、経過時間を維持できます。

自動再生間隔の上書き

自動再生の間隔はintervalオプションによって決定されますが、data-splide-intervalを利用すると、特定のスライドに対してのみこの間隔を上書きできます。

<li class="splide__slide" data-splide-interval="1000"></li>
<li class="splide__slide" data-splide-interval="10000"></li>
HTML

進捗率

autoplay:playingを使用すると、自動再生の経過時間を割合として取得できます。

var splide = new Splide( '.splide' );


splide.on( 'autoplay:playing', function ( rate ) {
  console.log( rate ); // 0-1
} );


splide.mount();
JavaScript

画面内にあるときのみ再生

Intersectionエクステンションを利用すると、スライダーが画面内に存在するときのみ自動再生するよう設定できます。