内部链接

您可以创建从一个幻灯片到另一个幻灯片的链接。首先,为您的目标幻灯片添加一个唯一的 id 属性。接下来,您可以创建一个 href 格式为 #/<id> 的锚。下面是一个完整的示例

<section>
	<a href="#/grand-finale">Go to the last slide</a>
</section>
<section>
	<h2>Slide 2</h2>
</section>
<section id="grand-finale">
	<h2>The end</h2>
	<a href="#/0">Back to the first</a>
</section>

还可以根据幻灯片的幻灯片索引链接到幻灯片。编号链接的 href 格式为 #/0,其中 0 是水平幻灯片编号。要链接到 垂直幻灯片,请使用 #/0/0,其中第二个数字是垂直幻灯片目标的索引。

<a href="#/2">Go to 2nd slide</a>
<a href="#/3/2">Go to the 2nd vertical slide inside of the 3rd slide</a>

您可以添加相对导航链接,它们的工作方式类似于内置的方向控制箭头。这可通过将以下其中一个类添加到 .reveal 容器中的任何可点击 HTML 元素中来实现。

<button class="navigate-left">Left</button>
<button class="navigate-right">Right</button>
<button class="navigate-up">Up</button>
<button class="navigate-down">Down</button>

<!-- Previous vertical OR horizontal slide -->
<button class="navigate-prev">Prev</button>

<!-- Next vertical OR horizontal slide -->
<button class="navigate-next">Next</button>

在基于当前幻灯片时的有效导航路径时,每个导航元素都会自动获得一个 enabled 类。例如,如果您在第一张幻灯片上,则只有 navigate-right 将具有 enabled 类,因为不可能向左导航。