Autoplay

自動再生

プログレスバーの表示

  • 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

自動再生間隔の上書き

自動再生の間隔は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

再生・停止ボタン

  • 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__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>
<div class="splide__autoplay">
<button class="splide__play">Play</button>
<button class="splide__pause">Pause</button>
</div>
</div>
HTML

矢印などと同様、自動再生のUIも、ルートか、あるいはスライダー要素内に配置する必要があります。

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

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