Beautiful HTML Presentation Library - reveal.js

Beautiful HTML Presentation Library - reveal.js
File Size: 2.48 MB
Views Total: 10897
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

reveal.js is a poweful jQuery JavaScript library for creating beautiful, touch-enable, full-features, powerpoint-like HTML5 presentation on the webpage.

See Also:

Key Features:

  • Supports unlimited levels of nested slides.
  • Slide overview mode when you press ESC key.
  • Optimized for mobile & touch devices.
  • Allows you to write slide content using inline or external Markdown.
  • Supports fragments in a slide.
  • Performant Fade, Slide, Convex, Concave, Zoom transitions.
  • 10+ built-in themes to fit your design.
  • You can link between slides internally.
  • Presentations can be exported to PDF.
  • Allows you to pause the presentation with B or . key.
  • Right-to-left support
  • Extensive JavaScript API
  • Auto-progression
  • Parallax backgrounds
  • Custom keyboard bindings
  • Image, iframe, video, parallax background.

Table Of Contents:

How to use it:

1. Download the package and load the necessary JavaScript and CSS files in the HTML document.

<link rel="stylesheet" href="dist/reveal.css" />
<script src="dist/reveal.js"></script>

2. Load a theme of your choice in the document:

<link rel="stylesheet" href="dist/theme/beige.css" />
<link rel="stylesheet" href="dist/theme/black.css" />
<link rel="stylesheet" href="dist/theme/blood.css" />
<link rel="stylesheet" href="dist/theme/league.css" />
<link rel="stylesheet" href="dist/theme/moon.css" />
<link rel="stylesheet" href="dist/theme/night.css" />
<link rel="stylesheet" href="dist/theme/serif.css" />
<link rel="stylesheet" href="dist/theme/simple.css" />
<link rel="stylesheet" href="dist/theme/sky.css" />
<link rel="stylesheet" href="dist/theme/solarized.css" />
<link rel="stylesheet" href="dist/theme/white.css" />

3. Load a plugin of your choice in the document:

<!-- Syntax highlighting -->
<script src="plugin/highlight/highlight.js"></script>

<!-- Write content using Markdown -->
<script src="plugin/markdown/markdown.js"></script>

<!-- Render math equations -->
<script src="plugin/math/math.js"></script>

<!-- Show a speaker view in a separate window -->
<script src="plugin/notes/notes.js"></script>

<!-- Press CTRL+Shift+F to search slide content -->
<script src="plugin/highlight/highlight.js"></script>

<!-- Alt+click to zoom in on elements -->
<script src="plugin/zoom/zoom.js"></script>

4. You can also install & import the reveal.js with NPM.

# Yarn
$ yarn add reveal.js

# NPM
$ npm i reveal.js --save
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
// .. more plugins here

5. Initialize the reveal.js and we're ready to go.

let instance = new Reveal({
    // ... options here ...
})
instance.initialize();

6. Load an extersion as per your needs. All possible extensions:

  • highlight: Synax highlighter.
  • markdown: Handles parsing of markdown inside of presentations as well as loading of external markdown documents.
  • math: Enables rendering of math equations inside of reveal.js slides. Essentially a thin wrapper for MathJax.
  • notes: Handles opening of and synchronization with the reveal.js notes window.
  • search: Handles finding a text string anywhere in the slides and showing the next occurrence to the user by navigatating to that slide and highlighting it.
  • zoom: Applies zoom-in/out animations to slides
// Browser
instance.initialize({
  plugins: [ RevealMarkdown ]
});

// ES Module
instance.initialize({
  plugins: [ Markdown ]
});

7. Insert your own slides into the presentation and done.

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>
      <section>Vertical Slide 2-1</section>
      <section>Vertical Slide 2-2</section>
    </section>
    <section>Slide 3</section>
    ...
  </div>
</div>

8. Or write your content using Markdown.

<section data-markdown>
  <textarea data-template>
    Markdown Here
  </textarea>
</section>

<section data-markdown="example.md"
         data-separator="^\n\n\n"
         data-separator-vertical="^\n\n"
         data-separator-notes="^Note:"
         data-charset="iso-8859-15">
         Or load from an external Markdown file
</section>

<section data-markdown>
  <script type="text/template">
    - Fragment 1
    - Fragment 2
    - Fragment 3
  </script>
</section>

<section data-markdown>
  <script type="text/template">
  <!-- .slide: data-background="#ff0000" -->
    Markdown Here
  </script>
</section>

9. Available HTML data attribute to customize each slide.

<!-- Custom Background Color -->
<section 
  data-background-color="black">
  ...
</section>

<!-- Custom Background Image -->
<section 
  data-background-image="1.png" 
  data-background-size="100px" 
  data-background-repeat="repeat"
  data-background-position="center"
  data-background-opacity="1">
  ...
</section>

<!-- Custom Background Video -->
<section 
  data-background-video="1.mp4"
  data-background-size="cover"
  data-background-opacity="1"
  data-background-video-loop 
  data-background-video-muted>
  ...
</section>

<!-- Iframe Backgrounds -->
<section 
  data-background-iframe="https://jqueryscript.net"
  data-background-interactive>
</section>

<!-- Video Autoplay -->
<section>
  <video data-autoplay src="1.mp4"></video>
</section>

<!-- Lazy Load Media -->
<section>
  <img data-src="image.png">
  <iframe data-src="https://www.jqueryscript.net"></iframe>
  <video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
  </video>
</section>

<!-- Lazy Load Iframes -->
<section>
  <iframe data-src="https://www.jqueryscript.net" data-preload></iframe>
</section>

<!-- Source Code -->
<section>
  <pre>
    <code data-trim data-noescape data-line-numbers="3,8-10">
      ... code here
    </code>
  </pre>
</section>

<!-- Hidden Slides -->
<section data-visibility="hidden">
  Hidden Slide
</section>

<!-- Uncounted Slides -->
<section data-visibility="uncounted">
  Uncounted Slide
</section>

<!--Transitions -->
<section 
  data-transition="zoom"
  data-transition-speed="fast">
  ...
</section>
<section 
  data-transition="fade"
  data-transition-speed="slow">
  ...
</section>
<section data-transition="slide">
  ...
</section>
<section data-transition="convex">
  ...
</section>
<section data-transition="concave">
  ...
</section>

<!-- Autoplay -->
<section data-auto-animate>
  ...
</section>

<!-- Auto Slide -->
<section data-autoslide="2000">
  ...
</section>

<!-- Prevent Swipe -->
<section>
  <p data-prevent-swipe>
    Can't change slides by swiping across this element.
  </p>
</section>

10. All default configuration options to customize your presentation.

instance.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
  // - true:    Show slide number
  // - false:   Hide slide number
  //
  // Can optionally be set as a string that specifies the number formatting:
  // - "h.v":   Horizontal . vertical slide number (default)
  // - "h/v":   Horizontal / vertical slide number
  // - "c":   Flattened slide number
  // - "c/t":   Flattened slide number / total slides
  //
  // Alternatively, you can provide a function that returns the slide
  // number for the current slide. The function should take in a slide
  // object and return an array with one string [slideNumber] or
  // three strings [n1,delimiter,n2]. See #formatSlideNumber().
  slideNumber: false,

  // Can be used to limit the contexts in which the slide number appears
  // - "all":      Always show the slide number
  // - "print":    Only when printing to PDF
  // - "speaker":  Only in the speaker view
  showSlideNumber: 'all',

  // Use 1 based indexing for # links to match slide number (default is zero
  // based)
  hashOneBasedIndex: false,

  // Add the current slide number to the URL hash so that reloading the
  // page/copying the URL will return you to the same slide
  hash: false,

  // Flags if we should monitor the hash and change slides accordingly
  respondToHashChanges: true,

  // Push each slide change to the browser history.  Implies `hash: true`
  history: false,

  // Enable keyboard shortcuts for navigation
  keyboard: true,

  // Optional function that blocks keyboard events when retuning false
  //
  // If you set this to 'foucsed', we will only capture keyboard events
  // for embdedded decks when they are in focus
  keyboardCondition: null,

  // Disables the default reveal.js slide layout (scaling and centering)
  // so that you can use custom CSS layout
  disableLayout: false,

  // 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,

  // Changes the behavior of our navigation directions.
  //
  // "default"
  // Left/right arrow keys step between horizontal slides, up/down
  // arrow keys step between vertical slides. Space key steps through
  // all slides (both horizontal and vertical).
  //
  // "linear"
  // Removes the up/down arrows. Left/right arrows step through all
  // slides (both horizontal and vertical).
  //
  // "grid"
  // When this is enabled, stepping left/right from a vertical stack
  // to an adjacent vertical stack will land you at the same vertical
  // index.
  //
  // Consider a deck with six slides ordered in two vertical stacks:
  // 1.1    2.1
  // 1.2    2.2
  // 1.3    2.3
  //
  // If you're on slide 1.3 and navigate right, you will normally move
  // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
  // from 1.3 -> 2.3.
  navigationMode: 'default',

  // Randomizes the order of slides each time the presentation loads
  shuffle: false,

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

  // Flags whether to include the current fragment in the URL,
  // so that reloading brings you to the same fragment position
  fragmentInURL: 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 question-mark
  // key is pressed
  help: true,

  // Flags if it should be possible to pause the presentation (blackout)
  pause: 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,

  // Global override for preloading lazy-loaded iframes
  // - null:   Iframes with data-src AND data-preload will be loaded when within
  //           the viewDistance, iframes with only data-src will be loaded when visible
  // - true:   All iframes with data-src will be loaded when within the viewDistance
  // - false:  All iframes with data-src will be loaded only when visible
  preloadIframes: null,

  // Can be used to globally disable auto-animation
  autoAnimate: true,

  // Optionally provide a custom element matcher that will be
  // used to dictate which elements we can animate between.
  autoAnimateMatcher: null,

  // Default settings for our auto-animate transitions, can be
  // overridden per-slide or per-element via data arguments
  autoAnimateEasing: 'ease',
  autoAnimateDuration: 1.0,
  autoAnimateUnmatched: true,

  // CSS properties that can be auto-animated. Position & scale
  // is matched separately so there's no need to include styles
  // like top/right/bottom/left, width/height or margin.
  autoAnimateStyles: [
    'opacity',
    'color',
    'background-color',
    'padding',
    'font-size',
    'line-height',
    'letter-spacing',
    'border-width',
    'border-color',
    'border-radius',
    'outline',
    'outline-offset'
  ],

  // Controls automatic progression to the next slide
  // - 0:      Auto-sliding only happens if the data-autoslide HTML attribute
  //           is present on the current slide or fragment
  // - 1+:     All slides will progress automatically at the given interval
  // - false:  No auto-sliding, even if data-autoslide is present
  autoSlide: 0,

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

  // Use this method for navigation when auto-sliding (defaults to navigateNext)
  autoSlideMethod: null,

  // Specify the average time in seconds that you think you will spend
  // presenting each slide. This is used to show a pacing timer in the
  // speaker view
  defaultTiming: null,

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

  // Opens links in an iframe preview overlay
  // Add `data-preview-link` and `data-preview-link="false"` to customise each link
  // individually
  previewLinks: false,

  // Exposes the reveal.js API through window.postMessage
  postMessage: true,

  // Dispatches all reveal.js events to the parent window through postMessage
  postMessageEvents: false,

  // Focuses body when page changes visibility to ensure keyboard shortcuts work
  focusBodyOnPageVisibilityChange: true,

  // 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

  // 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 away from the current that are visible
  viewDistance: 3,

  // Number of slides away from the current that are visible on mobile
  // devices. It is advisable to set this to a lower number than
  // viewDistance in order to save resources.
  mobileViewDistance: 2,

  // The display mode that will be used to show slides
  display: 'block',

  // Hide cursor if inactive
  hideInactiveCursor: true,

  // Time before the cursor is hidden (in ms)
  hideCursorTime: 5000

});

11. API methods.

// Navigate to a specific slide
Reveal.slide( indexh, indexv, indexf );

// Relative navigation
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();

// Fragment navigation
Reveal.prevFragment();
Reveal.nextFragment();

// Checks which directions we can navigate towards
// {top: false, right: true, bottom: false, left: false}
Reveal.availableRoutes();

// Call this if you add or remove slides to update controls, progress, etc
Reveal.sync();

// Call this to update the presentation scale based on available viewport
Reveal.layout();

// Randomize the order of slides
Reveal.shuffle();

// Returns the present configuration options
Reveal.getConfig();

// Fetch the current scale of the presentation
Reveal.getScale();

// Returns an object with the scaled presentationWidth & presentationHeight
Reveal.getComputedSlideSize();

// Coordinates of the slide (e.g. { h: 0, v: 0, f: 0 })
Reveal.getIndices(slide=currentSlide);  

// (0 == first slide, 1 == last slide)
Reveal.getProgress();                   

// Returns the speaker notes for the slide
Reveal.getSlideNotes(slide=currentSlide);

// Retrieves the previous and current slide elements
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();

// Returns an all horizontal/vertical slides in the deck
Reveal.getHorizontalSlides();
Reveal.getVerticalSlides();

// Total number of slides
Reveal.getTotalSlides();
Reveal.getSlidePastCount();

// Array of all slides
Reveal.getSlides();

// Checks if the presentation contains two or more
// horizontal/vertical slides
Reveal.hasHorizontalSlides();
Reveal.hasVerticalSlides();

// Checks if the deck has navigated on either axis at least once
Reveal.hasNavigatedHorizontally();
Reveal.hasNavigatedVertically();

Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isVerticalSlide();

// Shows a help overlay with keyboard shortcuts, optionally pass true/false
// to force on/off
Reveal.toggleHelp();

// Toggle presentation states, optionally pass true/false to force on/off
Reveal.toggleOverview();
Reveal.toggleAutoSlide();
Reveal.togglePause();

Reveal.isOverview();
Reveal.isAutoSliding();
Reveal.isPaused();

// Retrieve key DOM elements
Reveal.getRevealElement();
Reveal.getSlidesElement();
Reveal.getViewportElement();

// Plugin API
Reveal.hasPlugin( 'markdown' )
Reveal.getPlugin( 'markdown' )
Reveal.getPlugins()

12. Events.

Reveal.on('ready', event => {
  // event.currentSlide, event.indexh, event.indexv
});

Reveal.on('slidechanged', event => {
  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
});

Reveal.on('slidetransitionend', event => {
  // event.currentSlide
});

Reveal.on('resize', event => {
  // event.scale, event.oldScale, event.size
});

Reveal.on('overviewshown', event => {
  // ...
});

Reveal.on('overviewhidden', event => {
  // ...
});

Reveal.on('fragmentshown', event => {
  // event.fragment
});

Reveal.on('fragmenthidden', event => {
  // event.fragment
});

Reveal.on('autoslideresumed', event => {
  // ...
});

Reveal.on('autoslidepaused', event => {
  // ...
});

Changelog:

v4.2.0 (2021-11-14)

  • Bugs fixed.

v4.2.0 (2021-11-14)

  • The math plugin now supports three typesetting libraries: KaTeX, MathJax 2 and MathJax 3.
  • New event: beforeslidechange (#3003). This makes it possible to conditionally prevent navigations.
  • New keyboard shortcut for skipping fragments while navigating: alt + ←/↑/→/↓.
  • New API option for skipping fragments in directional navigation Reveal.right({ skipFragments: true }).
  • Adds a beforeHighlight callback to the highlight plugin
  • Code line numbers can now start from an offset (#3050). For example, this code block would begin its line numbering from 10: <code data-ln-start-from="10">.
  • Better error messaging when the .reveal or .slides containers are missing
  • Bugfixes

v4.1.2 (2021-06-09)

  • Adds support for data-auto-animate-restart and data-auto-animate-id. These properties give you finer control over which slides that should auto-animate between each other
  • Theme properties are now available as CSS variables, making them easy to override.
  • Bugfixes.

v4.1.1 (2021-05-21)

  • Adds support for Node.js 16.
  • data-background-image now accepts multiple images.
  • New Markdown config option animateLists — automatically turns all lists into stepped fragments.
  • Reduce the tab size in code blocks from 8 to 2.
  • More accurate calculation of which slide to jump to when clicking on the progress bar.
  • Optimize DOM interactions and reduce forced layouts when exporting to PDF.
  • Fixed: Video/audio inside of a fragment now stop playing when the fragment is hidden.
  • Fixed: Markdown is now split into individual slides by the default separator (---) as advertised.
  • Fixed: The r-fit-text layout helper now sizes text correctly in PDF exports.
  • Fixes an issue where some slide-specific transitions were incorrectly overridden by the global transition setting.
  • Fixed: The has-dark-background helper class now works when using named colors for data-background-color.

v4.1.0 (2020-10-12)

  • New: Add data-visibility="hidden" to a slide to hide it from view. 
  • New: Add the r-fit-text class to make a text node grow to be as large as possible without overflowing the slide.
  • The configured slide width/height is now exposed as CSS variables (--slide-width/--slide-height).
  • The shuffle config option now shuffles vertical slides as well.
  • All themes now invert the text color based on the current slide background color.
  • Include /css and /js in npm package.
  • Bugfixed

v4.0.2 (2020-05-29)

  • Enables caching for JavaScript builds, making subsequent builds ~50% faster.
  • In auto-sliding presentations, the data-autoslide attribute now takes precedence over automatic detection of <video> durations.
  • Remove overzealous reset styles when printing to PDF.
  • Reveal.configure and Reveal.isReady are now available in the pre-initialized reveal.js API, to match v3.x behavior.
  • Switches to serving demo presentation assets from a CDN.
  • Bugfixes.

v4.0.1 (2020-05-25)

  • Fixed issues when printing speaker notes to PDF
  • Fixed incorrect auto-animations when there are multiple auto-animated presentations on the same page

This awesome jQuery plugin is developed by hakimel. For more Advanced Usages, please check the demo page or visit the official website.