Javascript Reveal.js Example to Create HTML5 Powerpoint Presentations in Browser

Welcome folks today in this blog post we will be using the reveal.js library to create html5 powerpoint presentations in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!doctype html>
<html lang="en">
<head>
    <title>Reveal.js Example in Browser</title>
    
    <!-- Import the reveal.js CSS from CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.2.0/reveal.min.css">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.2.0/theme/sky.min.css">

    <!-- Load the reveal.js library from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.2.0/reveal.min.js"></script>
</head>

<body>
    
</body>

</html>

<!doctype html>

<head>

<title>Reveal.js Example in Browser</title>

</head>

<body>

</body>

</html>

As you can see we are including all the cdn of the above libraries such as the reveal.js css and the js and now we need to add the html code for the presentations. This will be in the form of the slides each slide will be have a section attached to it as shown below

<div class="reveal">
        <div class="slides">
            <!-- First slide -->
            <section>
                <h1>Welcome to my presentation</h1>
                <p>This is the first slide of my presentation.</p>
            </section>

            <!-- Second slide -->
            <section>
                <h2>About me</h2>
                <ul>
                    <li>My name is John Doe</li>
                    <li>I'm a software engineer</li>
                    <li>I love programming and technology</li>
                </ul>
            </section>

            <!-- Third slide -->
            <section>
                <h2>What I'm working on</h2>
                <p>Right now, I'm working on a new project that will revolutionize the world.</p>
            </section>


            <section>
                <h2>My Picture</h2>
                <img src="https://procodestore.com/wp-content/uploads/2021/03/164508084_271381191136191_654097929788476286_n.jpg"
                    alt="My Image">
            </section>


            <section>
              <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID_HERE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </section>

            <!-- Fifth slide -->
            <section>
                <h2>My Code</h2>
                <pre><code class="language-javascript">
        function addNumbers(a, b) {
            return a + b;
        }
    </code></pre>
            </section>
        </div>
    </div>

<h1>Welcome to my presentation</h1>

<p>This is the first slide of my presentation.</p>

</section>

<h2>About me</h2>

<ul>

<li>I'm a software engineer</li>

<li>I love programming and technology</li>

</ul>

</section>

<h2>What I'm working on</h2>

<p>Right now, I'm working on a new project that will revolutionize the world.</p>

</section>

<h2>My Picture</h2>

<img src="https://procodestore.com/wp-content/uploads/2021/03/164508084_271381191136191_654097929788476286_n.jpg"

alt="My Image">

</section>

</section>

function addNumbers(a, b) {

return a + b;

}

</code></pre>

</section>

</div>

As you can see we need to wrap all the slides of the powerpoint presentation in the parent class of the reveal and also we have the slides class where we define the child slides which contain the information about the ppt. This comprise or made up of basic html5 elements such as the headings and the paragraphs and also we are inserting images using the img tags and also we can insert the source code using the pre tags. And also we are using the iframe tag to embed the video using the video id.

And now we need to initialize the Reveal.js library by invoking the below method inside the javascript as shown below

<script>
        Reveal.initialize({
           
        });
</script>

Reveal.initialize({

});

</script>

As you can see we are using the initialize() method of the Reveal.js library and also here we can pass various options as well. These options are listed as shown below

Reveal.initialize({
    // Display presentation control arrows
    controls: true,

    // Help the user learn the controls by providing hints, for example by
    // bouncing the down arrow when they first encounter a vertical slide
    controlsTutorial: true,

    // Determines where controls appear, "edges" or "bottom-right"
    controlsLayout: 'bottom-right',

    // Visibility rule for backwards navigation arrows; "faded", "hidden"
    // or "visible"
    controlsBackArrows: 'faded',

    // Display a presentation progress bar
    progress: true,

    // Display the page number of the current slide
    slideNumber: false,

    // Determine which displays to show the slide on
    showSlideNumber: 'all',

    // Push each slide change to the browser history
    history: false,

    // Enable keyboard shortcuts for navigation
    keyboard: true,

    // Enable the slide overview mode
    overview: true,

    // Vertical centering of slides
    center: true,

    // Enables touch navigation on devices with touch input
    touch: true,

    // Loop the presentation
    loop: false,

    // Change the presentation direction to be RTL
    rtl: false,

    // See https://github.com/hakimel/reveal.js/#navigation-mode
    navigationMode: 'default',

    // Turns fragments on and off globally
    fragments: true,

    // Flags if the presentation is running in an embedded mode,
    // i.e. contained within a limited portion of the screen
    embedded: false,

    // Flags if we should show a help overlay when the questionmark
    // key is pressed
    help: true,

    // Flags if speaker notes should be visible to all viewers
    showNotes: false,

    // Global override for autolaying embedded media (video/audio/iframe)
    // - null: Media will only autoplay if data-autoplay is present
    // - true: All media will autoplay, regardless of individual setting
    // - false: No media will autoplay, regardless of individual setting
    autoPlayMedia: null,

    // Number of milliseconds between automatically proceeding to the
    // next slide, disabled when set to 0, this value can be overwritten
    // by using a data-autoslide attribute on your slides
    autoSlide: 0,

    // Stop auto-sliding after user input
    autoSlideStoppable: true,

    // Use this method for navigation when auto-sliding
    autoSlideMethod: Reveal.navigateNext,

    // Enable slide navigation via mouse wheel
    mouseWheel: false,

    // Hides the address bar on mobile devices
    hideAddressBar: true,

    // Opens links in an iframe preview overlay
    previewLinks: false,

    // Transition style
    transition: 'slide', // none/fade/slide/convex/concave/zoom

    // Transition speed
    transitionSpeed: 'default', // default/fast/slow

    // Transition style for full page slide backgrounds
    backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

    // Number of slides away from the current that are visible
    viewDistance: 3,

    // Parallax background image
    parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

    // Parallax background size
    parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"

    //
// Amount to move parallax background (horizontal and vertical) on slide change
// Number, e.g. 100
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null,

// The maximum number of pages a single slide can expand onto when printing
// to PDF, unlimited by default
pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,

// Prints each fragment on a separate slide
pdfSeparateFragments: true,

// Offset used to reduce the height of content within exported PDF pages.
// This exists to account for environment differences based on how you
// print to PDF. CLI printing options, like phantomjs and wkpdf, can end
// on precisely the total height of the document whereas in-browser
// printing has to end one pixel before.
pdfPageHeightOffset: -1,

// Number of slides to display per row in the slide overview
// Set to 1 to disable, 0 to completely hide
overviewRows: 1,

// Number of slides to display per column in the slide overview
// Set to 1 to disable, 0 to completely hide
overviewColumns: 1,

// Vertical padding (in percentage of the slide height) for the overview
overviewPadding: 0.1,

// Enable or disable the default reveal.js slide layout
// (scaling and centering of slides)
disableLayout: false,

// Enable or disable auto-scaling of small text
autoSlideStoppable: true,

// Enable or disable auto-scaling of small text
autoScale: true,

// Enable or disable speaker notes
showNotes: false,

// Enable or disable syntax highlighting of code
syntaxHighlight: {
    // Disables syntax highlighting by default
    // Should be a string containing the language name, see highlight.js for a list of supported languages
    language: null,

    // Globally enable or disable line numbers
    // Alternatively, line numbers per code block can be toggled using the data-line-numbers attribute
    lineNumbers: false,

    // Number of spaces per tab
    tabSize: 4,

    // Enables wrapping lines that exceed the width of the code container
    wrapLines: false,
},

// Plugins list
plugins: [],

// Slide keyboard shortcuts
keyboard: {
    // Press the ? key to see a list of keyboard shortcuts
    191: function () {
        Reveal.toggleHelp();
    },
    // 38 navigates to the previous slide when a vertical stack
    // is activated. It does nothing in a horizontal layout.
    38: function () {
        var indices = Reveal.getIndices();
        if (indices.v > 0) {
            Reveal.slide(indices.h, indices.v - 1);
        }
    },
    // 40 navigates to the next slide when a vertical stack
    // is activated. It does nothing in a horizontal layout.
    40: function () {
        var indices = Reveal.getIndices();
        if (
            indices.v <
            Reveal.getVerticalSlides(indices.h).length - 1
        ) {
            Reveal.slide(indices.h, indices.v + 1);
        }
    },
    // 37 navigates to the left slide
    37: function () {
        Reveal.navigatePrev();
    },
    // 39 navigates to the right slide
    39: function () {
        Reveal.navigateNext();
    },
},

})

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

Reveal.initialize({

// Display presentation control arrows

controls: true,

// Help the user learn the controls by providing hints, for example by

// bouncing the down arrow when they first encounter a vertical slide

controlsTutorial: true,

// Determines where controls appear, "edges" or "bottom-right"

controlsLayout: 'bottom-right',

// Visibility rule for backwards navigation arrows; "faded", "hidden"

// or "visible"

controlsBackArrows: 'faded',

// Display a presentation progress bar

progress: true,

// Display the page number of the current slide

slideNumber: false,

// Determine which displays to show the slide on

showSlideNumber: 'all',

// Push each slide change to the browser history

history: false,

// Enable keyboard shortcuts for navigation

keyboard: true,

// Enable the slide overview mode

overview: true,

// Vertical centering of slides

center: true,

// Enables touch navigation on devices with touch input

touch: true,

// Loop the presentation

loop: false,

// Change the presentation direction to be RTL

rtl: false,

// See https://github.com/hakimel/reveal.js/#navigation-mode

navigationMode: 'default',

// Turns fragments on and off globally

fragments: true,

// Flags if the presentation is running in an embedded mode,

// i.e. contained within a limited portion of the screen

embedded: false,

// Flags if we should show a help overlay when the questionmark

// key is pressed

help: true,

// Flags if speaker notes should be visible to all viewers

showNotes: false,

// Global override for autolaying embedded media (video/audio/iframe)

// - null: Media will only autoplay if data-autoplay is present

// - true: All media will autoplay, regardless of individual setting

// - false: No media will autoplay, regardless of individual setting

autoPlayMedia: null,

// Number of milliseconds between automatically proceeding to the

// next slide, disabled when set to 0, this value can be overwritten

// by using a data-autoslide attribute on your slides

autoSlide: 0,

// Stop auto-sliding after user input

autoSlideStoppable: true,

// Use this method for navigation when auto-sliding

autoSlideMethod: Reveal.navigateNext,

// Enable slide navigation via mouse wheel

mouseWheel: false,

// Hides the address bar on mobile devices

hideAddressBar: true,

// Opens links in an iframe preview overlay

previewLinks: false,

// Transition style

transition: 'slide', // none/fade/slide/convex/concave/zoom

// Transition speed

transitionSpeed: 'default', // default/fast/slow

// Transition style for full page slide backgrounds

backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

// Number of slides away from the current that are visible

viewDistance: 3,

// Parallax background image

parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

// Parallax background size

parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"

// Amount to move parallax background (horizontal and vertical) on slide change

// Number, e.g. 100

parallaxBackgroundHorizontal: null,

parallaxBackgroundVertical: null,

// The maximum number of pages a single slide can expand onto when printing

// to PDF, unlimited by default

pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,

// Prints each fragment on a separate slide

pdfSeparateFragments: true,

// Offset used to reduce the height of content within exported PDF pages.

// This exists to account for environment differences based on how you

// print to PDF. CLI printing options, like phantomjs and wkpdf, can end

// on precisely the total height of the document whereas in-browser

// printing has to end one pixel before.

pdfPageHeightOffset: -1,

// Number of slides to display per row in the slide overview

// Set to 1 to disable, 0 to completely hide

overviewRows: 1,

// Number of slides to display per column in the slide overview

// Set to 1 to disable, 0 to completely hide

overviewColumns: 1,

// Vertical padding (in percentage of the slide height) for the overview

overviewPadding: 0.1,

// Enable or disable the default reveal.js slide layout

// (scaling and centering of slides)

disableLayout: false,

// Enable or disable auto-scaling of small text

autoSlideStoppable: true,

// Enable or disable auto-scaling of small text

autoScale: true,

// Enable or disable speaker notes

showNotes: false,

// Enable or disable syntax highlighting of code

syntaxHighlight: {

// Disables syntax highlighting by default

// Should be a string containing the language name, see highlight.js for a list of supported languages

language: null,

// Globally enable or disable line numbers

// Alternatively, line numbers per code block can be toggled using the data-line-numbers attribute

lineNumbers: false,

// Number of spaces per tab

tabSize: 4,

// Enables wrapping lines that exceed the width of the code container

wrapLines: false,

// Plugins list

plugins: [],

// Slide keyboard shortcuts

keyboard: {

// Press the ? key to see a list of keyboard shortcuts

191: function () {

Reveal.toggleHelp();

// 38 navigates to the previous slide when a vertical stack

// is activated. It does nothing in a horizontal layout.

38: function () {

var indices = Reveal.getIndices();

if (indices.v > 0) {

Reveal.slide(indices.h, indices.v - 1);

}

// 40 navigates to the next slide when a vertical stack

// is activated. It does nothing in a horizontal layout.

40: function () {

var indices = Reveal.getIndices();

if (

indices.v <

Reveal.getVerticalSlides(indices.h).length - 1

) {

Reveal.slide(indices.h, indices.v + 1);

}

// 37 navigates to the left slide

37: function () {

Reveal.navigatePrev();

// 39 navigates to the right slide

39: function () {

Reveal.navigateNext();

})

In the above options these are all default values you can pass any of the above options to override or change the values to customize the behaviour of the reveal.js library.