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エクステンションを利用すると、スライダーが画面内に存在するときのみ自動再生を有効にすることができます。