Hakim El Hattab committed Jun 03, 2016 1 # reveal.js [![Build Status](https://travis-ci.org/hakimel/reveal.js.svg?branch=master)](https://travis-ci.org/hakimel/reveal.js) Hakim El Hattab committed Jan 21, 2013 2 Hakim El Hattab committed Aug 07, 2012 3 A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/). Hakim El Hattab committed Dec 26, 2011 4 Hakim El Hattab committed Jun 03, 2016 5 reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). There's also a fully featured visual editor and platform for sharing reveal.js presentations at [slides.com](https://slides.com?ref=github). Hakim El Hattab committed Dec 04, 2011 6 Hakim El Hattab committed Apr 07, 2016 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 ## Table of contents - [Online Editor](#online-editor) - [Instructions](#instructions) - [Markup](#markup) - [Markdown](#markdown) - [Element Attributes](#element-attributes) - [Slide Attributes](#slide-attributes) - [Configuration](#configuration) - [Presentation Size](#presentation-size) - [Dependencies](#dependencies) - [Ready Event](#ready-event) - [Auto-sliding](#auto-sliding) - [Keyboard Bindings](#keyboard-bindings) - [Touch Navigation](#touch-navigation) - [Lazy Loading](#lazy-loading) - [API](#api) - [Slide Changed Event](#slide-changed-event) - [Presentation State](#presentation-state) - [Slide States](#slide-states) - [Slide Backgrounds](#slide-backgrounds) - [Parallax Background](#parallax-background) - [Slide Transitions](#slide-transitions) - [Internal links](#internal-links) - [Fragments](#fragments) - [Fragment events](#fragment-events) - [Code syntax highlighting](#code-syntax-highlighting) - [Slide number](#slide-number) - [Overview mode](#overview-mode) - [Fullscreen mode](#fullscreen-mode) - [Embedded media](#embedded-media) - [Stretching elements](#stretching-elements) - [postMessage API](#postmessage-api) - [PDF Export](#pdf-export) - [Theming](#theming) - [Speaker Notes](#speaker-notes) - [Share and Print Speaker Notes](#share-and-print-speaker-notes) - [Server Side Speaker Notes](#server-side-speaker-notes) - [Multiplexing](#multiplexing) - [Master presentation](#master-presentation) - [Client presentation](#client-presentation) - [Socket.io server](#socketio-server) - [MathJax](#mathjax) - [Installation](#installation) - [Basic setup](#basic-setup) - [Full setup](#full-setup) - [Folder Structure](#folder-structure) - [License](#license) Hakim El Hattab committed Dec 04, 2011 54 Tomasz Ducin committed Apr 02, 2016 55 #### More reading Hakim El Hattab committed Jul 02, 2013 56 - [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history. Hakim El Hattab committed Aug 07, 2012 57 - [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own! Hansi committed Oct 12, 2012 58 - [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks. Hakim El Hattab committed Mar 13, 2015 59 - [Plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware): A list of plugins that can be used to extend reveal.js. Hakim El Hattab committed Aug 07, 2012 60 Hakim El Hattab committed Oct 22, 2013 61 ## Online Editor Hakim El Hattab committed Sep 04, 2012 62 Hakim El Hattab committed Jun 03, 2016 63 Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [https://slides.com](https://slides.com?ref=github). Hakim El Hattab committed Sep 04, 2012 64 65 Hakim El Hattab committed Aug 07, 2012 66 ## Instructions Hakim El Hattab committed Jan 14, 2012 67 Hakim El Hattab committed Apr 04, 2012 68 ### Markup Hakim El Hattab committed Jan 14, 2012 69 Hakim El Hattab committed Jan 22, 2016 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 Here's a barebones example of a fully working reveal.js presentation: html
Slide 1
Slide 2
 Hakim El Hattab committed Jan 22, 2016 92 The presentation markup hierarchy needs to be .reveal > .slides > section where the section represents one slide and can be repeated indefinitely. If you place multiple section elements inside of another section they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. For example: Hakim El Hattab committed Apr 04, 2012 93 Hakim El Hattab committed Jun 06, 2012 94 html 95
hakimel committed Jan 21, 2013 96
Hakim El Hattab committed Apr 04, 2012 97 98 99 100 101 102 103 104 105
Single Horizontal Slide
Vertical Slide 1
Vertical Slide 2
 Hakim El Hattab committed Jul 31, 2012 106 107 ### Markdown Hakim El Hattab committed Jan 31, 2017 108 It's possible to write your slides using Markdown. To enable Markdown, add the data-markdown attribute to your 
elements and wrap the contents in a  Hakim El Hattab committed Jul 31, 2012 119 120 121
 Hakim El Hattab committed Feb 27, 2013 122 123 #### External Markdown David Beitey committed Jun 22, 2016 124 You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the data-separator attribute defines a regular expression for horizontal slides (defaults to ^\r?\n---\r?\n\$, a newline-bounded horizontal rule) and data-separator-vertical defines vertical slides (disabled by default). The data-separator-notes attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to note:). The data-charset attribute is optional and specifies which charset to use when loading the external file. Hakim El Hattab committed Feb 27, 2013 125 David Beitey committed Jun 22, 2016 126 When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). The following example customises all available options: 127 Hakim El Hattab committed Feb 27, 2013 128 html 129 130
Hakim El Hattab committed Feb 27, 2013 135 136  Hakim El Hattab committed Oct 28, 2013 137 138 #### Element Attributes VonC committed Nov 30, 2013 139 Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things. Hakim El Hattab committed Oct 28, 2013 140 141 142 143 html
 Hakim El Hattab committed Nov 25, 2013 150 #### Slide Attributes Hakim El Hattab committed Nov 06, 2013 151 VonC committed Nov 30, 2013 152 Special syntax (in html comment) is available for adding attributes to the slide 
elements generated by your Markdown. Hakim El Hattab committed Nov 06, 2013 153 154 155 156 html
 Hakim El Hattab committed Jan 10, 2017 163 #### Configuring *marked* Benjamin Tan committed Dec 08, 2016 164 165 166 167 168 169 170 171 172 173 174 We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise marked's rendering, you can pass in options when [configuring Reveal](#configuration): javascript Reveal.initialize({ // Options which are passed into marked // See https://github.com/chjj/marked#options-1 markdown: { smartypants: true } }); Hakim El Hattab committed Jan 10, 2017 175  Hakim El Hattab committed Oct 28, 2013 176 Hakim El Hattab committed Apr 04, 2012 177 178 ### Configuration Hakim El Hattab committed Aug 07, 2012 179 At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below. Hakim El Hattab committed Jan 14, 2012 180 Hakim El Hattab committed Jun 06, 2012 181 javascript Hakim El Hattab committed Jan 14, 2012 182 Reveal.initialize({ Hakim El Hattab committed Jan 31, 2013 183 Hakim El Hattab committed Apr 04, 2012 184 // Display controls in the bottom right corner Hakim El Hattab committed Jan 14, 2012 185 186 187 188 189 controls: true, // Display a presentation progress bar progress: true, Adam Spiers committed Apr 20, 2017 190 191 192 // Set default timing of 2 minutes per slide defaultTiming: 120, 193 194 195 // Display the page number of the current slide slideNumber: false, 196 197 // Push each slide change to the browser history history: false, Hakim El Hattab committed Jan 14, 2012 198 Hakim El Hattab committed Jul 20, 2012 199 200 201 // Enable keyboard shortcuts for navigation keyboard: true, Hakim El Hattab committed Sep 21, 2012 202 203 204 // Enable the slide overview mode overview: true, Hakim El Hattab committed Nov 10, 2012 205 // Vertical centering of slides 206 center: true, Hakim El Hattab committed Nov 10, 2012 207 Ting-Yu Lin committed Oct 17, 2013 208 209 210 // Enables touch navigation on devices with touch input touch: true, 211 // Loop the presentation Hakim El Hattab committed Apr 28, 2012 212 213 loop: false, Hakim El Hattab committed Nov 27, 2012 214 215 216 // Change the presentation direction to be RTL rtl: false, Hakim El Hattab committed Mar 20, 2016 217 218 219 // Randomizes the order of slides each time the presentation loads shuffle: false, Ting-Yu Lin committed Oct 17, 2013 220 221 222 223 224 225 226 // 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, Hakim El Hattab committed Jun 16, 2014 227 228 229 230 // Flags if we should show a help overlay when the questionmark // key is pressed help: true, Hakim El Hattab committed Sep 09, 2015 231 232 233 // Flags if speaker notes should be visible to all viewers showNotes: false, Hakim El Hattab committed Mar 23, 2017 234 235 236 237 238 239 // 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, Hakim El Hattab committed Mar 17, 2013 240 // Number of milliseconds between automatically proceeding to the ageier committed Oct 11, 2012 241 // next slide, disabled when set to 0, this value can be overwritten Hakim El Hattab committed Oct 13, 2012 242 // by using a data-autoslide attribute on your slides 243 244 autoSlide: 0, 245 246 247 // Stop auto-sliding after user input autoSlideStoppable: true, MichiK committed Nov 19, 2015 248 249 // Use this method for navigation when auto-sliding autoSlideMethod: Reveal.navigateNext, MichiK committed Nov 18, 2015 250 251 // Enable slide navigation via mouse wheel 252 mouseWheel: false, Hakim El Hattab committed Jan 14, 2012 253 Ting-Yu Lin committed Oct 17, 2013 254 255 256 257 258 259 // Hides the address bar on mobile devices hideAddressBar: true, // Opens links in an iframe preview overlay previewLinks: false, Hakim El Hattab committed Jan 14, 2012 260 // Transition style Spencer Mathews committed Nov 15, 2016 261 transition: 'slide', // none/fade/slide/convex/concave/zoom Hakim El Hattab committed Apr 06, 2013 262 263 264 // Transition speed transitionSpeed: 'default', // default/fast/slow Hakim El Hattab committed Jan 31, 2013 265 Ting-Yu Lin committed Oct 17, 2013 266 // Transition style for full page slide backgrounds Spencer Mathews committed Nov 15, 2016 267 backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom Ting-Yu Lin committed Oct 17, 2013 268 269 // Number of slides away from the current that are visible Hakim El Hattab committed Oct 22, 2013 270 viewDistance: 3, 271 Michał Smoliński committed Sep 10, 2013 272 // Parallax background image Hakim El Hattab committed Sep 15, 2013 273 parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'" 274 Michał Smoliński committed Sep 10, 2013 275 // Parallax background size Rafael Moraes committed May 19, 2015 276 parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" Michał Smoliński committed Sep 10, 2013 277 Hakim El Hattab committed Nov 18, 2015 278 279 280 281 // Number of pixels to move the parallax background per slide // - Calculated automatically unless specified // - Set to 0 to disable movement along an axis parallaxBackgroundHorizontal: null, Hakim El Hattab committed Feb 02, 2017 282 283 284 285 parallaxBackgroundVertical: null, // The display mode that will be used to show slides display: 'block' Hakim El Hattab committed Jun 04, 2013 286 Hakim El Hattab committed Jan 14, 2012 287 288 289 });  Hakim El Hattab committed Mar 30, 2013 290 wtw committed Mar 15, 2013 291 The configuration can be updated after initialization using the configure method: Hakim El Hattab committed Mar 04, 2013 292 293 294 295 296 297 298 299 300 javascript // Turn autoSlide off Reveal.configure({ autoSlide: 0 }); // Start auto-sliding every 5s Reveal.configure({ autoSlide: 5000 });  Hakim El Hattab committed Feb 03, 2013 301 Andrew Dunning committed Oct 14, 2015 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 ### Presentation Size All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport. See below for a list of configuration options related to sizing, including default values: javascript Reveal.initialize({ ... // The "normal" size of the presentation, aspect ratio will be preserved // when the presentation is scaled to fit different resolutions. Can be // specified using percentage units. width: 960, height: 700, // Factor of the display size that should remain empty around the content margin: 0.1, // Bounds for smallest/largest possible scale to apply to content minScale: 0.2, maxScale: 1.5 });  Jaiden Mispy committed Oct 05, 2016 329 330 331 332 333 334 335 336 337 338 339 340 341 342 If you wish to disable this behavior and do your own scaling (e.g. using media queries), try these settings: javascript Reveal.initialize({ ... width: "100%", height: "100%", margin: 0, minScale: 1, maxScale: 1 });  Andrew Dunning committed Oct 14, 2015 343 Hakim El Hattab committed Aug 11, 2012 344 345 346 347 348 349 350 ### Dependencies Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example: javascript Reveal.initialize({ dependencies: [ Hakim El Hattab committed Aug 14, 2012 351 // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/ Hakim El Hattab committed Oct 28, 2012 352 { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, hakimel committed Jan 21, 2013 353 Hakim El Hattab committed Aug 14, 2012 354 // Interpret Markdown in
elements Amit Kotlovski committed May 01, 2013 355 { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, Hakim El Hattab committed Oct 28, 2012 356 { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, hakimel committed Jan 21, 2013 357 Hakim El Hattab committed Oct 28, 2012 358 359 // Syntax highlight for elements { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, hakimel committed Jan 21, 2013 360 Dan Dascalescu committed Oct 14, 2012 361 // Zoom in and out with Alt+click Hakim El Hattab committed Sep 28, 2014 362 { src: 'plugin/zoom-js/zoom.js', async: true }, Hakim El Hattab committed Nov 11, 2012 363 364 // Speaker notes Hakim El Hattab committed Sep 28, 2014 365 { src: 'plugin/notes/notes.js', async: true }, Hakim El Hattab committed Nov 11, 2012 366 Hakim El Hattab committed Aug 18, 2013 367 368 // MathJax { src: 'plugin/math/math.js', async: true } Hakim El Hattab committed Aug 11, 2012 369 370 371 372 373 374 375 376 377 378 ] });  You can add your own extensions using the same syntax. The following properties are available for each dependency object: - **src**: Path to the script to load - **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false - **callback**: [optional] Function to execute when the script has loaded - **condition**: [optional] Function which must return true for the script to be loaded Hakim El Hattab committed Dec 13, 2016 379 To load these dependencies, reveal.js requires [head.js](http://headjs.com/) *(a script loading library)* to be loaded before reveal.js. Hakim El Hattab committed Aug 11, 2012 380 Hakim El Hattab committed Jan 12, 2015 381 382 383 384 385 386 387 388 389 390 ### Ready Event A 'ready' event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call Reveal.isReady(). javascript Reveal.addEventListener( 'ready', function( event ) { // event.currentSlide, event.indexh, event.indexv } );  Hakim El Hattab committed Jul 01, 2016 391 Note that we also add a .ready class to the .reveal element so that you can hook into this with CSS. Hakim El Hattab committed Jan 12, 2015 392 Hakim El Hattab committed Oct 13, 2013 393 394 ### Auto-sliding kayakr committed Mar 26, 2015 395 Presentations can be configured to progress through slides automatically, without any user input. To enable this you will need to tell the framework how many milliseconds it should wait between slides: Hakim El Hattab committed Oct 13, 2013 396 397 398 399 400 401 402 javascript // Slide every five seconds Reveal.configure({ autoSlide: 5000 });  rajgoel committed Dec 20, 2013 403 When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »a« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying autoSlideStoppable: false in your reveal.js config. Hakim El Hattab committed Oct 13, 2013 404 Hakim El Hattab committed Dec 21, 2013 405 You can also override the slide duration for individual slides and fragments by using the data-autoslide attribute: Hakim El Hattab committed Oct 13, 2013 406 407 html rajgoel committed Dec 20, 2013 408 409 410 411 412

After 2 seconds the first fragment will be shown.

After 10 seconds the next fragment will be shown.

Now, the fragment is displayed for 2 seconds before the next slide is shown.

Hakim El Hattab committed Oct 13, 2013 413 414  MichiK committed Nov 19, 2015 415 416 To override the method used for navigation when auto-sliding, you can specify the autoSlideMethod setting. To only navigate along the top layer and ignore vertical slides, set this to Reveal.navigateRight. Hakim El Hattab committed Dec 21, 2013 417 418 Whenever the auto-slide mode is resumed or paused the autoslideresumed and autoslidepaused events are fired. Hakim El Hattab committed Oct 13, 2013 419 Hakim El Hattab committed Jun 18, 2013 420 421 422 423 424 425 426 427 428 429 430 431 432 433 ### Keyboard Bindings If you're unhappy with any of the default keyboard bindings you can override them using the keyboard config option: javascript Reveal.configure({ keyboard: { 13: 'next', // go to the next slide when the ENTER key is pressed 27: function() {}, // do something custom when ESC is pressed 32: null // don't do anything when SPACE is pressed (i.e. disable a reveal.js default binding) } });  Hakim El Hattab committed Sep 10, 2015 434 435 436 437 438 439 440 ### Touch Navigation You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the touch config option to false when initializing reveal.js. If there's some part of your content that needs to remain accessible to touch events you'll need to highlight this by adding a data-prevent-swipe attribute to the element. One common example where this is useful is elements that need to be scrolled. Hakim El Hattab committed Apr 22, 2014 441 442 ### Lazy Loading Hakim El Hattab committed Apr 23, 2014 443 When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the viewDistance configuration option. Hakim El Hattab committed Apr 22, 2014 444 Hakim El Hattab committed May 04, 2015 445 To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible. Hakim El Hattab committed Apr 22, 2014 446 447 448 449 html
Hakim El Hattab committed Apr 13, 2015 450 Hakim El Hattab committed Apr 22, 2014 451 452 453 454 455 456 457
 Hakim El Hattab committed Jun 18, 2013 458 Hakim El Hattab committed Apr 04, 2012 459 460 ### API Hakim El Hattab committed Jan 12, 2015 461 The Reveal object exposes a JavaScript API for controlling navigation and reading state: Hakim El Hattab committed Apr 04, 2012 462 Hakim El Hattab committed Jul 20, 2012 463 javascript 464 // Navigation Federico Fissore committed Nov 05, 2012 465 Reveal.slide( indexh, indexv, indexf ); 466 467 468 469 470 471 Reveal.left(); Reveal.right(); Reveal.up(); Reveal.down(); Reveal.prev(); Reveal.next(); Michael Kühnel committed Oct 23, 2012 472 473 Reveal.prevFragment(); Reveal.nextFragment(); Hakim El Hattab committed Jan 12, 2015 474 Hakim El Hattab committed Mar 20, 2016 475 476 477 // Randomize the order of slides Reveal.shuffle(); Hakim El Hattab committed Jan 12, 2015 478 // Toggle presentation states, optionally pass true/false to force on/off Hakim El Hattab committed Jul 20, 2012 479 Reveal.toggleOverview(); Hakim El Hattab committed Jun 18, 2013 480 Reveal.togglePause(); rajgoel committed Dec 20, 2013 481 Reveal.toggleAutoSlide(); 482 Hakim El Hattab committed Feb 09, 2017 483 484 485 486 // Shows a help overlay with keyboard shortcuts, optionally pass true/false // to force on/off Reveal.toggleHelp(); Hakim El Hattab committed Jan 12, 2015 487 488 489 // Change a config value at runtime Reveal.configure({ controls: true }); Hakim El Hattab committed Jan 12, 2015 490 // Returns the present configuration options Hakim El Hattab committed Jan 12, 2015 491 492 493 494 495 Reveal.getConfig(); // Fetch the current scale of the presentation Reveal.getScale(); 496 497 498 499 // Retrieves the previous and current slide elements Reveal.getPreviousSlide(); Reveal.getCurrentSlide(); Adam Spiers committed Apr 20, 2017 500 Reveal.getIndices(); // { h: 0, v: 0 } } Adam Spiers committed Apr 20, 2017 501 Reveal.getPastSlideCount(); Adam Spiers committed Apr 20, 2017 502 503 504 Reveal.getProgress(); // (0 == first slide, 1 == last slide) Reveal.getSlides(); // Array of all slides Reveal.getTotalSlides(); // total number of slides Hakim El Hattab committed Jun 18, 2013 505 Hakim El Hattab committed Sep 10, 2015 506 507 508 // Returns the speaker notes for the current slide Reveal.getSlideNotes(); Hakim El Hattab committed Jun 18, 2013 509 510 511 512 513 // State checks Reveal.isFirstSlide(); Reveal.isLastSlide(); Reveal.isOverview(); Reveal.isPaused(); Hakim El Hattab committed Dec 21, 2013 514 Reveal.isAutoSliding(); Hakim El Hattab committed Jul 20, 2012 515  Hakim El Hattab committed Apr 04, 2012 516 Hakim El Hattab committed Jun 18, 2013 517 ### Slide Changed Event 518 Branden Byers committed Jan 22, 2015 519 A 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. 520 Hakim El Hattab committed Nov 11, 2012 521 522 Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback. Hakim El Hattab committed Jun 06, 2012 523 javascript 524 Reveal.addEventListener( 'slidechanged', function( event ) { 525 // event.previousSlide, event.currentSlide, event.indexh, event.indexv 526 527 528 } );  Hakim El Hattab committed Jan 12, 2015 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 ### Presentation State The presentation's current state can be fetched by using the getState method. A state object contains all of the information required to put the presentation back as it was when getState was first called. Sort of like a snapshot. It's a simple object that can easily be stringified and persisted or sent over the wire. javascript Reveal.slide( 1 ); // we're on slide 1 var state = Reveal.getState(); Reveal.slide( 3 ); // we're on slide 3 Reveal.setState( state ); // we're back on slide 1  ### Slide States Hakim El Hattab committed Jun 18, 2013 547 548 549 550 551 552 553 554 555 556 557 558 If you set data-state="somestate" on a slide 
, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. Furthermore you can also listen to these changes in state via JavaScript: javascript Reveal.addEventListener( 'somestate', function() { // TODO: Sprinkle magic }, false );  ### Slide Backgrounds Hakim El Hattab committed Jun 04, 2013 559 Hakim El Hattab committed May 23, 2016 560 Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a data-background attribute to your 
 elements. Four different types of backgrounds are supported: color, image, video and iframe. Hakim El Hattab committed Jun 04, 2013 561 Hakim El Hattab committed Apr 27, 2017 562 #### Color Backgrounds Hakim El Hattab committed May 23, 2016 563 All CSS color formats are supported, like rgba() or hsl(). Hakim El Hattab committed Jun 04, 2013 564 html Hakim El Hattab committed May 23, 2016 565 566

Color

Hakim El Hattab committed Jun 04, 2013 567
Hakim El Hattab committed May 23, 2016 568 569  Hakim El Hattab committed Apr 27, 2017 570 #### Image Backgrounds Hakim El Hattab committed May 23, 2016 571 572 573 574 575 576 577 578 579 580 581 By default, background images are resized to cover the full page. Available options: | Attribute | Default | Description | | :--------------------------- | :--------- | :---------- | | data-background-image | | URL of the image to show. GIFs restart when the slide opens. | | data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. | | data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. | | data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. | html

Image

Hakim El Hattab committed Jun 04, 2013 582
Hakim El Hattab committed May 23, 2016 583 584

This background image will be sized to 100px and repeated

Hakim El Hattab committed Jun 04, 2013 585
Hakim El Hattab committed May 23, 2016 586 587  Hakim El Hattab committed Apr 27, 2017 588 #### Video Backgrounds Hakim El Hattab committed May 23, 2016 589 590 591 592 593 594 595 Automatically plays a full size video behind the slide. | Attribute | Default | Description | | :--------------------------- | :------ | :---------- | | data-background-video | | A single video source, or a comma separated list of video sources. | | data-background-video-loop | false | Flags if the video should play repeatedly. | | data-background-video-muted | false | Flags if the audio should be muted. | Hakim El Hattab committed Jan 18, 2017 596 | data-background-size | cover | Use cover for full screen and some cropping or contain for letterboxing. | Hakim El Hattab committed May 23, 2016 597 598 html Razvan Caliman committed Dec 03, 2015 599
Hakim El Hattab committed May 23, 2016 600

Video

Hakim El Hattab committed Oct 17, 2014 601
Hakim El Hattab committed May 23, 2016 602 603  Hakim El Hattab committed Apr 27, 2017 604 #### Iframe Backgrounds Hakim El Hattab committed Apr 27, 2017 605 Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the data-background-interactive attribute. Hakim El Hattab committed May 23, 2016 606 html Hakim El Hattab committed Apr 27, 2017 607
Hakim El Hattab committed May 23, 2016 608

Iframe

Hakim El Hattab committed Oct 17, 2014 609
Hakim El Hattab committed Jun 04, 2013 610 611  Hakim El Hattab committed Apr 27, 2017 612 #### Background Transitions Hakim El Hattab committed Jun 18, 2013 613 Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing backgroundTransition: 'slide' to the Reveal.initialize() call. Alternatively you can set data-background-transition on any section with a background to override that specific transition. Hakim El Hattab committed Jun 04, 2013 614 VonC committed Nov 04, 2013 615 Michał Smoliński committed Sep 10, 2013 616 617 ### Parallax Background Hakim El Hattab committed Feb 25, 2015 618 If you want to use a parallax scrolling background, set the first two config properties below when initializing reveal.js (the other two are optional). Michał Smoliński committed Sep 10, 2013 619 620 621 javascript Reveal.initialize({ 622 Michał Smoliński committed Sep 10, 2013 623 // Parallax background image Hakim El Hattab committed Sep 15, 2013 624 parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" 625 Michał Smoliński committed Sep 10, 2013 626 // Parallax background size Hakim El Hattab committed Sep 15, 2013 627 parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) 628 Hakim El Hattab committed Nov 18, 2015 629 630 631 // Number of pixels to move the parallax background per slide // - Calculated automatically unless specified // - Set to 0 to disable movement along an axis Hakim El Hattab committed Feb 25, 2015 632 633 parallaxBackgroundHorizontal: 200, parallaxBackgroundVertical: 50 Michał Smoliński committed Sep 10, 2013 634 635 636 637 });  Hakim El Hattab committed Nov 27, 2013 638 Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://lab.hakim.se/reveal-js/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px). Michał Smoliński committed Sep 10, 2013 639 640 Hakim El Hattab committed Jun 04, 2013 641 Hakim El Hattab committed Jun 18, 2013 642 643 ### Slide Transitions The global presentation transition is set using the transition config value. You can override the global transition for a specific slide by using the data-transition attribute: Hakim El Hattab committed Jun 18, 2013 644 Hakim El Hattab committed Jun 18, 2013 645 646 647 648 html

This slide will override the presentation transition and zoom!

Hakim El Hattab committed Jun 18, 2013 649 Hakim El Hattab committed Jun 18, 2013 650 651 652

Choose from three transition speeds: default, fast or slow!

Hakim El Hattab committed Jun 18, 2013 653 654  Hakim El Hattab committed May 03, 2015 655 You can also use different in and out transitions for the same slide: Johannes Ammon committed Jan 18, 2015 656 657 658 html
Razvan Caliman committed Sep 19, 2015 659 The train goes on … Johannes Ammon committed Jan 18, 2015 660
Razvan Caliman committed Sep 19, 2015 661 662
and on … Johannes Ammon committed Jan 18, 2015 663
Razvan Caliman committed Sep 19, 2015 664
Johannes Ammon committed Jan 18, 2015 665 666 and stops.
Razvan Caliman committed Sep 19, 2015 667
Johannes Ammon committed Jan 18, 2015 668 669 670 671 672 673 674 675 (Passengers entering and leaving)
And it starts again.
 Hakim El Hattab committed Oct 20, 2012 676 677 678 679 680 681 682 683 ### Internal links It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (
): html Link Link  684 Dan Dascalescu committed Nov 10, 2012 685 You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an enabled class when it's a valid navigation route based on the current slide. 686 687 688 689 690 691 html Hakim El Hattab committed Nov 20, 2012 692 693 694 695 696  Hakim El Hattab committed Oct 20, 2012 697 ### Fragments Hakim El Hattab committed Oct 11, 2013 698 Fragments are used to highlight individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/fragments Hakim El Hattab committed Oct 20, 2012 699 700 701 702 703 704 705 706 The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment: html

grow

shrink

Hakim El Hattab committed Jan 08, 2016 707

fade-up (also down, left and right!)

Guillaume Turri committed Nov 26, 2013 708 709

visible only once

blue only once

Hakim El Hattab committed Oct 20, 2012 710 711 712 713 714 715

highlight-red

highlight-green

highlight-blue

 Hakim El Hattab committed Nov 11, 2012 716 717 Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second. Hakim El Hattab committed Nov 20, 2012 718 html Hakim El Hattab committed Nov 11, 2012 719
Rob Schellhorn committed Jan 18, 2013 720 Hakim El Hattab committed Nov 11, 2012 721 722 723 724 725 I'll fade in, then out
 726 727 728 729 730 731 732 733 734 735 The display order of fragments can be controlled using the data-fragment-index attribute. html

Appears last

Appears first

Appears second

 736 737 738 739 ### Fragment events When a slide fragment is either shown or hidden reveal.js will dispatch an event. Hakim El Hattab committed Jul 14, 2013 740 741 Some libraries, like MathJax (see #505), get confused by the initially hidden fragment elements. Often times this can be fixed by calling their update or render function from this callback. Hakim El Hattab committed Jun 06, 2012 742 javascript 743 744 745 746 747 748 749 750 Reveal.addEventListener( 'fragmentshown', function( event ) { // event.fragment = the fragment DOM element } ); Reveal.addEventListener( 'fragmenthidden', function( event ) { // event.fragment = the fragment DOM element } );  wtw committed Mar 15, 2013 751 ### Code syntax highlighting hakimel committed Jan 23, 2013 752 Hakim El Hattab committed Jan 08, 2016 753 By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the data-trim attribute is present, surrounding whitespace is automatically removed. HTML will be escaped by default. To avoid this, for example if you are using  to call out a line of code, add the data-noescape attribute to the  element. hakimel committed Jan 23, 2013 754 755 756 html
Wendy Smoak committed Sep 13, 2015 757

hakimel committed Jan 23, 2013            758      759      760                                                                                                                                                                                                                                                                                                                                                            (def lazy-fib   (concat    [0 1]
Wendy Smoak committed Sep 13, 2015        761                                                                                                                                                                                                                                                                                                                                                                              ((fn rfib [a b]
hakimel committed Jan 23, 2013            762                                                                                                                                                                                                                                                                                                                                                                              (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
Hakim El Hattab committed Jan 23, 2013    763
hakimel committed Jan 23, 2013 764 765 766
 Hakim El Hattab committed Nov 28, 2013 767 ### Slide number Malcolm Young committed Feb 17, 2017 768 If you would like to display the page number of the current slide you can do so using the slideNumber and showSlideNumber configuration values. Hakim El Hattab committed Nov 28, 2013 769 770 javascript Hakim El Hattab committed Jan 16, 2015 771 // Shows the slide number using default formatting Hakim El Hattab committed Nov 28, 2013 772 Reveal.configure({ slideNumber: true }); Hakim El Hattab committed Jan 16, 2015 773 774 // Slide number formatting can be configured using these variables: Hakim El Hattab committed Oct 29, 2015 775 776 // "h.v": horizontal . vertical slide number (default) // "h/v": horizontal / vertical slide number Hakim El Hattab committed Oct 29, 2015 777 778 779 // "c": flattened slide number // "c/t": flattened slide number / total slides Reveal.configure({ slideNumber: 'c/t' }); Hakim El Hattab committed Jan 16, 2015 780 Hakim El Hattab committed Feb 20, 2017 781 782 783 784 785 // Control which views the slide number displays on using the "showSlideNumber" value: // "all": show on all views (default) // "speaker": only show slide numbers on speaker notes view // "print": only show slide numbers when printing to PDF Reveal.configure({ showSlideNumber: 'speaker' }); Malcolm Young committed Feb 17, 2017 786 Hakim El Hattab committed Nov 28, 2013 787 788  hakimel committed Jan 23, 2013 789 Hakim El Hattab committed Nov 20, 2012 790 791 ### Overview mode Hakim El Hattab committed Jul 18, 2013 792 Press "Esc" or "o" keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides, hakimel committed Jan 21, 2013 793 794 795 796 797 798 799 800 801 as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks: javascript Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } ); Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } ); // Toggle the overview mode programmatically Reveal.toggleOverview();  Hakim El Hattab committed Nov 20, 2012 802 Hakim El Hattab committed Mar 23, 2017 803 Hakim El Hattab committed Nov 20, 2012 804 805 806 ### Fullscreen mode Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. Hakim El Hattab committed Aug 20, 2012 807 Hakim El Hattab committed Apr 27, 2013 808 809 810 811 ### Embedded media Add data-autoplay to your media element if you want it to automatically start playing when the slide is shown: html Hakim El Hattab committed Apr 27, 2013 812 Hakim El Hattab committed Apr 27, 2013 813 814  Hakim El Hattab committed Mar 23, 2017 815 816 817 818 819 820 821 822 If you want to enable or disable autoplay globally, for all embedded media, you can use the autoPlayMedia configuration option. If you set this to true ALL media will autoplay regardless of individual data-autoplay attributes. If you initialize with autoPlayMedia: false NO media will autoplay. Note that embedded HTML5 `