Markup

Here's a barebones example of a fully working reveal.js presentation:

<html>
<head>
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/white.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script>
Reveal.initialize();
</script>
</body>
</html>

The presentation markup hierarchy needs to be .reveal > .slides > section where the section element represents one slide and can be repeated indefinitely.

If you place multiple section elements inside of another section they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. For example:

<div class="reveal">
<div class="slides">
<section>Horizontal Slide</section>
<section>
<section>Vertical Slide 1</section>
<section>Vertical Slide 2</section>
</section>
</div>
</div>
Horizontal Slide
Vertical Slide 1
Vertical Slide 2

It's also possible to write presentations using Markdown.

Viewport

The reveal.js viewport is the wrapper DOM element that determines the size of your presentation on a web page. By default, this will be the body element. If you're including multiple presentations on the same page each presentations .reveal element will act as their viewport.

The viewport is always decorated with a reveal-viewport class reveal.js is initialized.

Slide Visibility

When preparing a presentation it can sometimes be helpful to prepare optional slides that you may or may not have time to show. This is easily done by appending a few slides at the end of the presentation, however this means that the reveal.js progress bar and slide numbering will hint that there are additional slides.

To "hide" those slides from reveal.js' numbering system you can add a data-visibility attribute to the slide.

<section data-visibility="uncounted"></section>

Slide States

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

<section data-state="make-it-pop"></section>
/* CSS */
.make-it-pop {
filter: drop-shadow(0 0 10px purple);
}

You can also listen to these changes in state via JavaScript:

Reveal.on( 'make-it-pop', () => {
console.log('✨');
} );