reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com.
The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax highlighted code and an extensive API.
This is the BBC fork of reveal.js and includes BBC styling including the Reith fonts and BBC blocks. To be used for BBC presentations only.
Include this:
<link rel="stylesheet" href="dist/theme/bbc.css">
Include CSS file in the <head> of index.html:
<link rel="stylesheet" href="plugin/accessibility/helper.css">- Include JavaScript file as dependency in
index.html:
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
dependencies: [
{ src: 'plugin/accessibility/helper.js', async: true, condition: function() {
return !!document.body.classList;
}
}]
});
</script>Hidden offscreen slides
This plugin adds CSS to "really hide" offscreen slides using display: none; on an element wrapping each slide. This technique was used to avoid issues with transitions and display: none. For this to work, the styles must be loaded in HTML as a <link> tag (as opposed to injecting dynamically with JavaScript).
HTML <section> elements commonly used for slides will act as landmarks in screen readers. To make them easier to identify, this plugin dynamically adds an aria-label property with a value of "Slide 1", as an example. For nested slides, it will add "Slide 1, child 1" with numbers relative to that slide.
Purpose: uniquely labeled sections are more useful in assistive technology than <section> soup.
Before (your code):
<section>Reveal.js</section>
<section>
<section>It might be dated</section>
<section>But it's still useful</section>
</section>After (dynamically rendered code):
<section aria-label="Slide 1">Reveal.js</section>
<section aria-label="Slide 2">
<section aria-label="Slide 2, child 1">It might be dated</section>
<section aria-label="Slide 2, child 2">But it's still useful</section>
</section>Want to create reveal.js presentation in a graphical editor? Try https://slides.com. It's made by the same people behind reveal.js.
Note that there are breaking changes relative to previous versions. See the Upgrade instructions for more details.
Hakim's open source work is supported by GitHub sponsors. Special thanks to:
- 🚀 Install reveal.js
- 👀 View the demo presentation
- 📖 Read the documentation
- 🖌 Try the visual editor for reveal.js at Slides.com
- 🎬 Watch the reveal.js video course (paid)