Basic structure to start reveal.js

In the head section, call the main style and also the theme you want to use (give an id of “theme”). Available themes are: beige, black, blood, league, moon, night, simple, serif, sky, white and solarized. For this demo, I simply use the black one like so:

Code Structure to add in head
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">

Code Structure to add at the end of body
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>

HTML
There are three main elements for creating the presentation slides. They are: <div class="reveal">, <div class="slides"> and <section>.

<div class="reveal">
  <div class="slides">
      <section>This is horizontal slide</section>
      <section>
          <section>And this is vertical slide</section>
      </section>
  </div>
</div>

Script
Reveal.initialize({
  controls: true,
  progress: true,
  history: true,
  center: true,
});

These are the basic code structure required to start with. If you require full list of configuration, you can check 'https://github.com/hakimel/reveal.js'

Share this

Related Posts