内部链接
您可以创建从一个幻灯片到另一个幻灯片的链接。首先,为您的目标幻灯片添加一个唯一的 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
类,因为不可能向左导航。