Beautiful HTML Presentation Library - reveal.js
File Size: | 2.57 MB |
---|---|
Views Total: | 13941 |
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:
- Installation
- Markup
- Data Attributes
- Options
- API Methods
- Events
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>
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(); // 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:
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.