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'