Where to Use an HTML slide presentation in reveal JS?

Reveal.js is a framework for creating beautiful presentations using HTML. It has sleek features such as markdown content, nested slides, PDF exports, and JavaScript APIs to control slide navigation. Presentations are written using HTML using Reveal.js.

Setting Up reveal.js

Before using reveal.js, you should have both Node.js and Grunt installed on your machine. The next steps are to clone the reveal.js repository from GitHub, install all of the dependencies, and start the revealed server.

Creating a Presentation

A presentation reveals the HTML pages slide. Before the end of the body tag, we have a script that is key to the presentation configuration. There are several options that we can configure. For example, we can optionally show presentation progress, can enable the transition, and set a theme for our presentation. Once, we start adding slides in your presentation that we will dig deeper.


Now, we’ll start adding slides to your presentation letter. Using this HTML, add your first slide. Section represents elements slide. As an example illustrated by the nested classes, we can also nest within the other slides.

Save your file and restart the server using the command grunt serve. You should look at the slides went created our new. Note that the arrow can be controlled slides using keys. Although this functionality is enabled by default, you can configure the behavior by using the keyboard in the really Reveal.js initialize () method.


There are many themes available such as Beige, Solarized, and Sky which are located in CSS / Theme. To use them, you’ll just have to change the default style on your page, as shown in the following example.


The infection can be revealed of style and speed. Using the initial () transition and transition speed parameters. An example of this is shown below.

Markdown Slide Content

If you want to encourage you to write your slides using Markdown so fans Markdown. Just add a data-markdown attribute to your section tag, and wrap your content inside the tag as shown below.

Tagged : / / / /
0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x