Main idea
- An HTML file contains the whole presentation
- Themes as CSS files
- Plugins for extra functionality, autoloaded when used
- Nice JavaScript API for really custom things
By Lea Verou and contributors
slide
class to any elements.<header class="slide">
is a header slide (relevant for the Overview)data-insert="#id"
on an empty slide to re-insert it later in the slideshowtitle
or data-title
attributes or headings in the slide.class="delayed"
).delayed:not(.current):not(.displayed)
to change the style of undisplayed items.delayed.displayed
to change the style of displayed items.delayed.current
to change the style of current itemsclass="delayed-children"
to apply the delayed
class to all of an element’s children<code class="no-overview">
to prevent this.data-prism-plugins
attribute, on any element (first one will be used).var start = new Date().getTime();
setInterval(function() {
React.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
}, 50);
data-video
for URLclass="annotation"
for annotationsdata-time
and data-pause
on annotationsdata-duration
on the body
.#timer
and #timer.end
respectively.data-resolution
on the <body>
for all slides, a grouping element, or individual slides (like this one!).<p class="presenter-notes">
for presenter notes. You need at least one of these to have the plugin loaded.You can use the data-slide
attribute on <style>
elements in slides, to only style the current slide or inside sections that include multiple slides to style all of them and nothing else.
For example, run $('#slidestyle style').sheet.cssRules[0].selectorText
in the console to see how the original selector gets changed.