SlidesJS Help

SlidesJS is a SaxonJS application that displays a simple subset of HTML as a series of slides. For example, the demo presentation.

NOTE: The slide presentation uses JavaScript so it must be run from a web server. It will not work directly from the filesystem with a file:/ URI.

Table of contents

Key bindings

Most navigation is accomplished with key bindings and gestures.

a
Reveals all hidden list items, if there are any.
h
Returns to the title slide. (“Home”.)
n or Space, →, ↓
Moves to the next slide, if there is one. Pressing n moves unconditionally. Pressing any of the other keys reveals the next hidden list item, if there is one. If there are no hidden items, moves to the next slide, if there is one.
p or ←, ↑
Moves to the previous slide, if there is one. Pressing p moves unconditionally. Pressing any of the other keys hides the last revealed list item, if there is one. If there are no revealed items, moves to the previous slide, if there is one.
s
Toggles between the normal view and the speaker notes view.
t
Toggles the Table of Contents window. If the window is displayed, Esc will also close it.
x
Toggles between the normal view and a non-slideshow view that displays all the slides in a single scroll. (If you want to print the slides, see the print.html output instead.)

Touch screen gestures

On a touch screen, touching near the left or right edge of the screen simulates a left or right arrow press. Touching near the top or bottom edge simulates an up or down arrow press.

Swiping right simulates pressing ‘p’, swiping left simulates pressing ‘n’.

Features

Several features can be enabled by adding HTML metadata to your presentation.

Synchronized presentation

If you specify a localStorage.key in the HTML metadata:

<meta name="localStorage.key" content="slidesjs" />

That key will be used with the HTML local storage API to keep multiple browser windows in sync. This allows you, for example, to display the speaker notes view on one browser and the normal view on another. The browsers will remain in sync if you navigate in either of them.

If you want to have multiple, different presentations in sync simultaneously, they need to have different keys. Otherwise, the key is irrelevant.

Duration timer

If you specify a timer in the HTML metadata:

<meta name="timer" content="true"/>

A timer will be displayed in the lower-left corner of the speaker notes view. Clicking on the timer when it is running will pause it. Clicking on it when it’s paused will start it running again. Clicking reset (on the far right hand side of the screen) will reset it.

Countdown timer

If you specify the length of your talk in the HTML metadata:

<meta name="talk-length" content="30"/>

A countdown timer will be displayed in the lower-left corner of the speaker view. It decrements whenever the ordinary timer is running. It will change color as the time runs out.

Specify the talk length in minutes (30 = 30 minutes), or hours and minutes (1:30 = 90 minutes).

Syntax highlighting

By default the Prism syntax highlighter is included. You can swap it out for a different highlighter by changing the script and CSS links. You will probably need to change the forceHighlight function in js/start.js to highlight dynamically loaded content.