Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on March 25, 2023

 

 

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

 

 

JavaScript
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.

 

 

Recent Posts

  • Python 3 Flask Project to Export Multiple PDF Documents to Word Docx Files Using pdf2docx Library in Browser
  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • Python 3 Script to Convert PDF Document to Microsoft Word DOCX File Using pdf2docx Library
  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme