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)<iframe
, when the content in the iframe is focused, Inspire.js shortcuts will not work.
There is no way around that, you need to click on something from the actual slide to get focus out of the iframe before you use any Inspire.js keyboard shortcuts.
Some plugins (e.g. live demo) add on-screen "Next" buttons for this reason.
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.future
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!).<details class="notes">
for collapsible slide notes.data-markdown-elements="details.notes"
and all notes will support Markdown!
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.