This Meteor package adds the Reveal.js JavaScript and CSS files to the client.
meteor add lsgoulart:reveal-js
HTML
Markup hierarchy needs to be <div class="reveal"> <div class="slides"> <section> where the <section> represents one slide and can be repeated indefinitely. If you place multiple <section>'s 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 it will be included in the horizontal sequence. For example:
<div class="reveal">
<div class="slides">
<section>Single Horizontal Slide</section>
<section>
<section>Vertical Slide 1</section>
<section>Vertical Slide 2</section>
</section>
</div>
</div>Consult the instructions of Reveal.js for more information.
JavaScript
You need to call Reveal.initialize() when the client DOM is ready.
This can be achieved in a Meteor.startup() function callback.
if (Meteor.isClient) {
Meteor.startup( function() {
Reveal.initialize();
});
}If you use a template, you must do the initialization using Template.myTemplate.onRendered().
Template.myTemplate.onRendered( function() {
Reveal.initialize();
});You can use configuration values as described in the documentation of Reveal.js, for example:
Reveal.initialize({
loop: true,
controls: false,
progress: false,
autoSlide: 5000
});The configuration can be updated after initialization using the configure method:
// Turn autoSlide off
Reveal.configure({ autoSlide: 0 });
// Start auto-sliding every 5s
Reveal.configure({ autoSlide: 5000 });Themes
You can import one of the built-in theme files, as follow:
<head>
<link rel="stylesheet" href="/packages/lsgoulart/reveal.js/css/theme/<theme_name>.css" id="theme"/>
</head>Replace <theme_name> by one of the following built-in themes:
beigeblooddefaultmoonnightserifsimpleskysolarized
For example:
<head>
<link rel="stylesheet" href="/packages/lsgoulart/reveal.js/css/theme/moon.css" id="theme"/>
</head>By setting the id attribute the theme can be changed by calling Reveal.configure(). For example:
Reveal.configure({theme: "moon"});See sample application running at http://reveal-js.meteor.com/
Source files are available at https://github.com/neo-technologies/meteor-reveal-js-demo