README.md

reveal.js

A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Doesn't rely on any external libraries but highlight.js is included by default for code highlighting.

Note that this requires a browser with support for CSS 3D transforms and classList. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. A polyfill for classList by @remy is also incuded to make this work in < iOS 5, < Safari 5.1 and IE.

Usage

Markup

Markup heirarchy needs to be <div id="reveal"> <div class="slides"> <section> where the <section> represents one slide and can be repeated indefinitely. If you place multiple <section>'s inside of another <section> they will be shown as vertical slides. For example:

API

The Reveal class provides a minimal JavaScript API for controlling its navigation:

Reveal.navigateTo( indexh, indexv );

Reveal.navigateLeft();

Reveal.navigateRight();

Reveal.navigateUp();

Reveal.navigateDown();

States

If you set data-state="someState" on a slide <section>, "someState" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.

Furthermore you can also listen to these changes in state via JavaScript: