Navigation example

This presentation illustrates how to add explicit navigation.

Use PageDown/PageUp or the arrow keys or the arrow symbols to move between slides.

This presentation adds back/next arrow symbols next to the page number to move between slides

It also adds up/down arrow symbols next to those, to move between segments.

Template

The template for this presentation contains:

<a class="jump up" href="">&lt;</a>     
<a class="jump back" href="">&lt;</a>
<span class="here"></span>
<a class="jump next" href="">&gt;</a>
<a class="jump down" href="">&gt;</a>

One or both pairs of links can be added. The style contains:

.back, .next, .up, .down { text-decoration: none; }

Segments

Segments are marked by slides which start like this:

<section data-up="s3" id="s4" data-down="s5">

If a section tag contains a data-up attribute, the "previous section" links on subsequent slides take you back to this slide (or by default the first slide)

If a section tag contains a data-down attribute, the "next section" links on this slide and subsequent slides take you forward to the slide mentioned

Last slide

The last slide has invisible next/down links.

Here's an example explicit link back to the first slide:

first slide