Reveal.js is a competent HTML presentation library jQuery plugin. It offers an amazing animation of sliding the distinctive tabs inside any website. Meanwhile, when a user switches the tab horizontally and vertically in a flitter way with some allotted arrows or symbols, an individual gets the discrete information at different tab. There is no need to scroll your mouse to get up to the necessary data informative library. It completes the operations with just a click.
Table of Contents
Key Features:
- Supports unlimited levels of nested slides.
- Slide overview mode when you press ESC key.
- Optimized for mobile & touch devices.
- Allows you to write slide content using inline or external Markdown.
- Supports fragments in a slide.
- Performant Fade, Slide, Convex, Concave, Zoom transitions.
- 10+ built-in themes to fit your design.
- You can link between slides internally.
- Presentations can be exported to PDF.
- Allows you to pause the presentation with B or . key.
- Right-to-left support
- Extensive JavaScript API
- Auto-progression
- Parallax backgrounds
- Custom keyboard bindings
- Image, iframe, video, parallax background.
Basic usage:
1. Download the package and load the necessary JavaScript and CSS files in the HTML document.
<link rel="stylesheet" href="css/reveal.css" />
<script src="js/reveal.js"></script>
2. Load a theme of your choice in the document:
<link rel="stylesheet" href="css/theme/beige.css" />
<link rel="stylesheet" href="css/theme/black.css" />
<link rel="stylesheet" href="css/theme/blood.css" />
<link rel="stylesheet" href="css/theme/league.css" />
<link rel="stylesheet" href="css/theme/moon.css" />
<link rel="stylesheet" href="css/theme/night.css" />
<link rel="stylesheet" href="css/theme/serif.css" />
<link rel="stylesheet" href="css/theme/simple.css" />
<link rel="stylesheet" href="css/theme/sky.css" />
<link rel="stylesheet" href="css/theme/solarized.css" />
<link rel="stylesheet" href="css/theme/white.css" />
3. Initialize the reveal.js and we’re ready to go.
Reveal.initialize();
4. Load an extersion as per your needs. All possible extensions:
Reveal.initialize({
dependencies: [
// Interpret Markdown in <section> elements
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
// Syntax highlight for <code> elements
{ src: 'plugin/highlight/highlight.js', async: true },
// Zoom in and out with Alt+click
{ src: 'plugin/zoom-js/zoom.js', async: true },
// Speaker notes
{ src: 'plugin/notes/notes.js', async: true },
// MathJax
{ src: 'plugin/math/math.js', async: true }
]
});
5. Insert your own slides into the presentation and done.
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>
<section>Vertical Slide 2-1</section>
<section>Vertical Slide 2-2</section>
</section>
<section>Slide 3</section>
...
</div>
</div>
6. API methods.
<link rel="stylesheet" href="css/reveal.css" />
<script src="js/reveal.js"></script>