自動スライド

プレゼンテーションは、ユーザーの入力を必要とせずに、自動的にスライドを進めるように構成できます。これを実現するには、autoSlideの設定オプションを使用して、スライドの切り替え間隔をミリ秒単位で指定する必要があります。

// Slide every five seconds
Reveal.initialize({
  autoSlide: 5000,
  loop: true,
});
スライド 1
スライド 2
スライド 3

自動スライドのデッキには、再生/一時停止コントロール要素が自動的に表示されます。ユーザーがデッキとの対話を始めると、スライドは自動的に一時停止します。キーボードの「A」キーを押すことで、スライドを一時停止したり再開したりすることもできます(ここで埋め込まれたデモでは機能しません)。

config optionsautoSlideStoppable: falseを指定すれば、自動スライドコントロールを無効にし、自動スライドが一時停止されることを防ぐことができます。

スライドのタイミング

data-autoslide属性を使用することで、個々のスライドとフラグメントのスライドの時間をオーバーライドすることもできます。

<section data-autoslide="2000">
  <p>After 2 seconds the first fragment will be shown.</p>
  <p class="fragment" data-autoslide="10000">
    After 10 seconds the next fragment will be shown.
  </p>
  <p class="fragment">
    Now, the fragment is displayed for 2 seconds before the next slide is shown.
  </p>
</section>

自動スライドメソッド

autoSlideMethod設定オプションを使用すると、自動スライド時のナビゲーションに使用される既定の関数をオーバーライドできます。

既定では、横方向と縦方向のすべてのスライドをステップスルーします。最上位レイヤーに沿ってナビゲートし、縦方向のスライドを無視したい場合は、Reveal.right()を呼び出すメソッドを提供できます。

Reveal.configure({
  autoSlideMethod: () => Reveal.right(),
});

イベント

自動スライドが一時停止または再開されるたびにイベントを発生させます。

Reveal.on('autoslideresumed', (event) => {
  /* ... */
});
Reveal.on('autoslidepaused', (event) => {
  /* ... */
});