自动幻灯片

幻灯片演示可以设置为在没有用户输入的情况下自动浏览幻灯片。要启用此功能,你需要使用autoSlide配置选项指定幻灯片切换的时间间隔。此时间间隔以毫秒为单位。

// Slide every five seconds
Reveal.initialize({
  autoSlide: 5000,
  loop: true,
});
幻灯片 1
幻灯片 2
幻灯片 3

自动幻灯片组会自动显示播放/暂停控件元素。如果用户开始与幻灯片进行交互,则幻灯片会自动暂停。也可以按键盘上的“A”键来暂停或继续滑动(在此处嵌入的示例中不起作用)。

你可以禁用自动幻灯片控件并通过在你的配置选项中指定autoSlideStoppable: 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) => {
  /* ... */
});