English

Autoplay

自動再生

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

プログレスバーの表示

  • 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

再生・停止ボタン

再生・停止ボタンを追加するには、次のような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も、ルートか、あるいはスライダー要素内に配置する必要があります。

再生・停止ボタンを提供する場合、同時にpauseOnHoverオプションをfalseに設定することをおすすめします。 そうしないと、ユーザが停止ボタンをクリックする前に自動再生が停止してしまいます。

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

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