Presentation in HTML / JavaScript

Getting Started

Look at the source of this page.
Look at presentation.js.

CSS Classes

next-link
previous-link
slide
current-slide

CSS side

Focus your stylesheet on the class 'current-slide',
which is the class of the slide currently showing.

HTML side

Add the links:
- previous with class 'previous-link'
- next with class 'next-link'.
Wrap each slide in the class 'slide'.

That's all :-)

It's so easy...
... thanks to jQuery...
... see how it's done in HTML and JavaScript...
... look at the source of this page...
... and look at presentation.js

Exercises

Provide a print view.
Provide keyboard shortcuts (left, right, space).
Make it real!