hakimel / reveal.js

The HTML Presentation Framework

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com.

The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax highlighted code and an extensive API.

---

Want to create reveal.js presentation in a graphical editor? Try https://slides.com. It's made by the same people behind reveal.js.

---

Sponsors

Hakim's open source work is supported by GitHub sponsors. Special thanks to:

Your app, enterprise-ready. Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.

---

Getting started

• 🚀 Install reveal.js
• 👀 View the demo presentation
• 📖 Read the documentation
• 🖌 Try the visual editor for reveal.js at Slides.com
• 🎬 Watch the reveal.js video course (paid)

---

MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se

reveal.js's Issues

External Navigation / transitionToSlide()

This is one of the better solutions out there, thanks!
It would be even better, if we could attach specific slides to links somewhere else on the page to transition to (optionally, passing by the slides in between the active and selected)?

So, requesting a jumpToSlide() and/or transitionToSlide().

change selector specificity of styles

having #reveal in front of most of the styles means when i want to override them, i have to use a hefty selector string. 😢

ideally we just use classes and no ID selectors at all

Updates to allow for plugins

It should be possible to extend upon the reveal.js core via modules. This will enable contributors to easily write re-usable modules for specific use-cases that may not belong in the core project.

As part of this the reveal.js API should also be extended upon (getCurrentSlide etc).

scaling up

This is an enhancement request...sorry if this is not the right place. While reveal.js is great and performs quite well, I'd like to be able to have

(slides) that refer to totally different web pages (another reveal.js slide show). The reason is that I'm integrating 3D graphics (X3DOM) see: http://math.nist.gov/~SRessler/x3dom/revealjs/index.xhtml#/ and if I have a lot of pages with substantially sized 3D graphics content the browser crawls to a halt. I believe that if there is a smooth way to jump to another reveal.js slide show that all would be well. Of course I could simply link to another page but then all context of the previous slides would vanish.

I have to say I'm amazed that reveal.js functions as well as it does with the X3DOM code I'm currently using. I've tried several other HTML slide show tools and this is by far the most robust. Thanks in advance...Sandy

event for fragment change

Or it is better to include it to slidechanged event. Something like event.indexf

Printing?

Does anyone know of any ways of printing a reveal.js slideshow? Since the browser is being faked into thinking all the pages are separate "slides" the printing (not surprisingly) doesn't work at all. Anyone got any hacks to print out a presentation?

The controls are broken with the latests update

I downloaded the code last week and everything works fine with the controls. I re-download today to start a new project and the controls are broken.

It doesn't appear and if I force it by CSS the behavior is strange.

Nested lists don't render very well any more

Just upgraded from 1.1 to 1.3 (master) and noticed that nested lists don't render very well any more. They indent far too much, and their parent list item's content ends up underneath the child list.

<ul>
  <li>Foo
    <ul>
      <li>bar</li>
      <li>bar</li>
    </ul>
  </li>
</ul>

Trigger custom JS on a per slide basis

I'm considering putting a video into a presentation I'm doing. Problem is that when I use the embed code from Youtube a black box shows up during transitions. I'd like to load the iframe only when that particular slide is displayed.

1. Is this possible now?
2. Is this a possible implentation?

Mobile view don't hide bar address

The slide almost show pretty well on Android mobile. The only stuff missing is the address bar. Can you do something to hide it ?

slidechange fires twice

"slidechanged" event fires twice!?

index.html - line 288
// Fires each time a new slide is activated
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.indexh & event.indexv
} );

Lack of some useful events

It would be nice to add some more events like:
onRender - called just before rendering current slide, e.g. currently there is no event to handle first slide rendering
onChanged - called after slide change animation, useful when you want to clean your previous slide but don't want to change it's appearance during animation

Strange blocks of black/blue appearing in Chrome dev edition

Hi,

First of all - thanks so much for this great tool, I've been using it a lot lately.

I thought I'd just let you know, I've been using the Chrome dev edition recently and I noticed today that the slides sometimes have random black/blue blocks of colour appear on the right hand side.

Here's a screengrab so you know what I'm talking about:

http://www.flickr.com/photos/17642352@N05/6802445481/

It's probably just a bug in the dev version of Chrome (probably with the latest update - I'm on version 18.0.1025.1), but I thought I'd let you know in case you wanted to check it out.

Thanks,

peter

Slide Overview should show hidden segments

When going into the slide overview with "space", its handy to show the hidden segments.
I've got this hacked into my fork (which is also a personal presentation).

If I cleaned this up and made it a configuration option, would you be interested in including this feature? (I'd probably have it ready at the end of the week).

HTML5 video fullscreen bug

embed a html 5 video and click the fullscreen button, a display bug occurred.
In Safari (5.1.6): the video is misplaced (moves down the right )
In Firefox (13.0.1): no fullscreen, the video size corresponds the slides css class

#reveal still used in index.html

<div id="reveal">

should be changed to

<div class="reveal">

New example presentation

Gave this presentation at cf.Objective() in Minneapolis, May 16-19:
http://andymatthews.net/downloads/presentations/going-deeper-with-jquery-mobile/

I'm also going to giving an improved version at jQuery Con in San Francisco this month

Auto start slideshow

Does this have the ability to start automatically and go through the slides without using the controls?

Support for smaller screens

It'd be great to use @media-queries to make it work on all devices. Thanks so much for the work so far!

Build slide overview

Should be available via keyboard shortcut and lay out miniatures of all slides in a grid. Clicking on a cell navigates to the respective slide.

Fragments in subsections

Fragments in subsections do not work properly.

For example:

<section>
   <section>
    <ol>
        <li class="fragment"><code>any type</code></li>
        <li class="fragment"><em>of view</em></li>
        <li class="fragment"><strong>fragments</strong></li>
    </ol>
  </section>
</section>

I believe this is due to the fact that the "present" class is given both to the parent and the child section.

Going up/down in vertical slides causes a scrollbar to appear for a split second

Experienced in Chrome 16

Print styles

Tried printing out my presentation and found that the project needs print styles. Anyone attempt this yet?

hover effect messes up linked images

Lets say I have a screenshot that I've linked to a site.

As soon as I hover over the screenshot, it's flipped up and nothing has flipped in place

Content overflowing

Hello,

when I have a block of code (or any other elements) that is to "high" for the page, it overflows and I can't see the content. My first reflex was was to add contenteditable to the <code> tag and then using the down arrow key, which worked kind of well in chrome but not at all in Firefox.

But the best solution I could come up with isn't the perfect solution, but it works. I added the class .overflow to the <code> tag:

.overflow{
    overflow: auto;
    width: 100%; /* Takes up the whole width of the slide */
    height: 400px; /* 100% doesn't work here, 400px seems to work well with almost every resolution. */
}

I'm no expert, this was just a little problem I encountered, and I'm sure their are plenty better ways to tackle this problem.

Another thing, I know there is supposed to be a fallback mode, but the presentation doesn't work at all in IE (does not appear...I don't know if this is intentional). Just wanted to let you know.

Anyway, love the work you've done, it's very impressive and helpful.

-bobicool

Conflict with Shadowbox

Including Shadowbox makes slides just not show.

A default for table

I think a default style for "table" with padding and th should be provided

nested lists are unstyled

I went with something like

#reveal ol ul {
    display: block;
    margin-left: 80px;

 }

but the selector probably needs to capture more than just that ol ul combo

Box transition is not smooth on iOS

reveal.js to PDF

It would be nice to have a feature to export the slides to PDF or similar to prepare handouts etc.

Printing doesn't work with linear transition style

When using the linear transition style, printing results in a blank page.

Change the style transition between two slides?

Is there any exemple of how can I change the default transition style for a specific slides? Can I define a "local transition style" between two slides?

Thanks for advance!

When history is enabled the animation isn't smoot in chrome

When I have history on and I navigate between the slides, the animation isn't going to be smooth.
I don't see this issue in Safari and Firefox. At least not that much.

Maybe it's better to do the history not on start of changing slide but at the end.

Glitch in 3D transitions on Windows 7 Chrome

Endless Loop

Is there any way to loop to the beginning automatically?

Thanks

Cant put states on fragments

I would like to change the background-image in ".statebackground" also with the fragments, but it is not doable. Could we add states also to the fragments?

page numbers (both horiz and vert)

Does there exist an option to display the page number (both horizontal and vertical)? If this doesn't exist consider this a feature request ;-)
thanks...Sandy

IE10 lower nested slides are visible

Nested slides show artifacts at the bottom of higher slides on IE10 (and I would assume IE9).

For example on this slide in IE10 you can see the titles of the subsequent slides at the bottom:
http://lab.hakim.se/reveal-js/#/2

pretty sure it's something to do with the 3D transforms but they appear to work as you slide up/down but after the slide has faded out it snaps back to being visible again.

GUI Editor

Do you have any preliminary work done on a GUI editor?

class getting overwritten for #reveal sections

reveal.js seems to be overwriting any existing class names on

elements within the #reveal element. This makes it very hard to customize content within a specific slide via CSS. Any manually assigned class names on a

element should be preserved. future and other reveal.js class names should be appended to the list of classes, not overwrite all existing ones.

Thnx!

Hola @hakimel !

Thanks for adding 'ThePoet' .
This is me @creatorrr

data-markdown

What do you think about baking markdown support into this template?
https://gist.github.com/1343518

I use this each time anyhow. And its a tiny bit of code to support.

named internal links?

I know we can internally link to a numbered slide (href="#/2"), but is there a way to give anchor names to slides, so that if I move a slide that is linked to, I won't have to also change the link?

Thanks so much for this, by the way...fantastic work.

Include zoom.js to enlarge images and code samples

Replace <progress> bar with div

Partly for cross platform inconsistency in styles, but mainly to add a transition in width.

Fragments on vertical slides are broken

If you have fragments on vertical slides that are not yet visible hitting down causes them to reveal instead of moving the vertical slide down one level.

Page Transition Problem in Chrome

• URL: http://lab.hakim.se/reveal-js/?transition=page#/2/2
• Env: Chrome 19

It seems that page transition not works correctly in Chrome. There are sometimes a disappearing block.

Code samples cannot be read on projector

In the two times I presented on projectors to a large room the code examples were both too small and too darkly colored to be visible to anyone but those in the very front row.

Drop usage of 'classList' to lower iOS barrier to 3.2+

Allows slides to be vertically centered

It would be nice to have the option to align the contents of the slides with the center line of the page, especially given the radial background drawing attention to the center of the screen.

I had a quick hack about I didn't see any obvious solutions, however.