jQuery Plugins › jQuery Animation Plugins › reveal.js

Beautiful HTML Presentation Library - reveal.js

File Size:	2.59 MB
Views Total:	15903
Last Update:	03/30/2025 07:11:00 UTC
Publish Date:	01/10/2013 01:41:09 UTC
Official Website:	Go to website
License:	MIT

Demo Download

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
Image/video lightbox supported

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>

<!-- Gradient Background -->
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
  ...
</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>

<!-- Image Lightbox -->
<img src="reveal.png" data-preview-image>
<img src="reveal.png" data-preview-image="another.png">

<!-- Video Lightbox -->
<video src="video.mp4" data-preview-video></video>
<img src="preview.png" data-preview-video="video.mp4">

<!-- Media Size -->
<img src="reveal.png" data-preview-image data-preview-fit="cover">

10. All default configuration options to customize your presentation.

instance.initialize({

  // The "normal" size of the presentation, aspect ratio will be preserved
  // when the presentation is scaled to fit different resolutions
  width: 960,
  height: 700,

  // Factor of the display size that should remain empty around the content
  margin: 0.04,

  // Bounds for smallest/largest possible scale to apply to content
  minScale: 0.2,
  maxScale: 2.0,

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

  // Enable support for jump-to-slide navigation shortcuts
  jumpToSlide: 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 'focused', we will only capture keyboard events
  // for embedded 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,

  // Flags if slides with data-visibility="hidden" should be kep visible
  showHiddenSlides: false,

  // Global override for autoplaying 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

  // Parallax background image
  parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"

  // Parallax background size
  parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"

  // Parallax background repeat
  parallaxBackgroundRepeat: '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit

  // Parallax background position
  parallaxBackgroundPosition: '', // CSS syntax, e.g. "top left"

  // Amount of pixels to move the parallax background per slide step
  parallaxBackgroundHorizontal: null,
  parallaxBackgroundVertical: null,

  // Can be used to initialize reveal.js in one of the following views:
  // - print:   Render the presentation so that it can be printed to PDF
  // - scroll:  Show the presentation as a tall scrollable page with scroll
  //            triggered animations
  view: null,

  // Adjusts the height of each slide in the scroll view.
  // - full:       Each slide is as tall as the viewport
  // - compact:    Slides are as small as possible, allowing multiple slides
  //               to be visible in parallel on tall devices
  scrollLayout: 'full',

  // Control how scroll snapping works in the scroll view.
  // - false:     No snapping, scrolling is continuous
  // - proximity:  Snap when close to a slide
  // - mandatory:  Always snap to the closest slide
  //
  // Only applies to presentations in scroll view.
  scrollSnap: 'mandatory',

  // Enables and configure the scroll view progress bar.
  // - 'auto':    Show the scrollbar while scrolling, hide while idle
  // - true:      Always show the scrollbar
  // - false:     Never show the scrollbar
  scrollProgress: 'auto',

  // Automatically activate the scroll view when we the viewport falls
  // below the given width.
  scrollActivationWidth: 435,

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

  // Should we automatically sort and set indices for fragments
  // at each sync? (See Reveal.sync)
  sortFragmentsOnSync: true,

  // Script dependencies to load
  dependencies: [],

  // Plugin objects to register and use for this presentation
  plugins: []

});

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();

// load an external URL
Reveal.initialize({ url: 'https://example.com/my-reveal-presentation' })

// Destroy
Reveal.destroy();

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

v5.2.1 (2025-03-30)

Prevent reveal.js keyboard shortcuts while lightbox is open
Opening iframe lightboxes via [data-preview-link] now works all element types, not just <a>
Lightbox state is now persisted/restored when calling Reveal.getState and Reveal.setState
Lightbox now syncs between speaker view and main window
Fix pause overlay/lightbox layering conflict

v5.2.0 (2025-03-20)

Any element in your presentation can now be turned into an image/video lightbox trigger. Clicking reveals a full-size lightbox overlay where users can view your image or video. This is great for things like clickable thumbnails in a gallery.
Add controls: "speaker-only" config option for only showing controls in speaker view
Extend search API to include closeSearch and toggleSearch
Automatic source code spellcheck via GitHub action
Math plugin now ignores code tags by default
Muted background videos now autoplay in the speaker view.
Prevent initialize from being called twice
Auto-animate no longer skips matching fragments on adjacent slides
Bugfixes

v5.1.0 (2024-04-12)

Add the enter-fullscreen class to any element in your presentation to turn it into fullscreen trigger
Video backgrounds now continue to play seamlessly across multiple slides
Bugfixes

v5.0.5 (2024-02-26)

Keyboard navigation support in scroll view
Bugfixes

v5.0.4 (2023-12-22)

Fixed: Missing slide backgrounds in mobile scroll view

v5.0.3 (2023-12-18)

Search plugin now supports searching for diacritics and searches full phrases
Jump-to-slide now adapts to the configured slide number format
Slide background XSS prevention
Bug fixes

v5.0.2 (2023-11-09)

Make Markdown plugin callable without a reveal deck instanc
Bugfixes

v5.0.0 (2023-10-28)

Add support for scroll view (via config view: "scroll" or by appending ?view=scroll to a deck URL)
The PDF print view can now be activated via config Reveal.initialize({ view: 'print' })
The new URL query for activating the print view is ?view=print. It used to be ?print-pdf, which is still supported for backwards compatibility.
Bugfixed

v4.6.0 (2023-09-12)

Add support for line number offsets in Markdown code blocks.
Significantly speed up livereload
Add support for links to the id of an element nested inside slide
Adds ability to override Markdown plugin default options
Allow theme subfolders
Refactored Markdown plugin to use let/const and strict equality
Bugfixes

v4.5.0 (2023-04-13)

Add support for jump-to-slide!
Add dracula theme
Add two new high contrast themes: black-contrast and white-contrast
Add default lang attribute to index.html
It's now easier to define custom fragment styles via a new .custom class and reduced specificity.
Live reload now works with .html/.md files in subfolders

v4.4.0 (2022-10-17)

Gradient slide backgrounds
If multiple separate notes are provided for the same slide they will now all show in the speaker view
Updated browser targets from > 0.5%, IE 11, not dead to > 2%, not dead
Stop using zoom for presentation scaling. Zoom produced sharper upsizing than CSS transforms but it's a non-standard CSS property with a few too many quirks
Bug Fixes

v4.3.1 (2022-03-21)

Fix bug that prevented speaker view from working from file:// protocol
Fix console errors attempting to parse postMessage events from sources other than reveal.js
Fix issue with providing your own config for MathJax3 plugin
Fix ZIP package gulp task
Replace deprecated String.prototype.substr()

v4.3.0 (2022-02-28)

It's now possible to destroy/uninitialize a reveal.js presentation. This will remove all event listeners and roll back all changes made to the DOM. It will also unregister all plugins and destroy them if they expose a destroy method.
You can now provide an absolute URL to the presentation that should be loaded in the speaker view. This is useful if you have a presentation integrated as part of a web page but still want the speaker view to work.
Bugsfixed

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.

Beautiful HTML Presentation Library - reveal.js

See Also:

Key Features:

Table Of Contents:

How to use it:

Changelog:

Beautiful HTML Presentation Library - reveal.js

See Also:

Key Features:

Table Of Contents:

How to use it:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review