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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<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> |
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
1 2 3 4 5 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.