Reveal.js

A framework that helps us to easily create a beautiful presentation using HTML.

Slide transitions

Lower right corner control bar control switch

You can use the keyboard arrow keys

You can use the mouse wheel to switch

Mobile sliding switch

Automatic sliding


// Swipe once every 5 seconds, if set to 0, it will not slide automatically
Reveal.configure({
  autoSlide: 5000
});
                

Slide background

Slides are contained within a limited area of the scene and, by default, allow them to fit any viewport and zoom consistency. You can add the background of the entire page outside the slide by adding a data-background attribute to your <section> element. Four types of backgrounds are supported: color, image, video, and iframe.

Slide transition effect

The slide transition effect is set by the transition configuration value. You can override the global configuration by specifying the data-transition attribute of the

element.

Support effect:none/fade/slide/convex/concave/zoom

Embedded multimedia

The embedded HTML5 <video>/<audio> and YouTube inline frames will automatically pause when you navigate away from a slide. This can be disabled by specifying a data-ignore attribute for your element.

Internal links

Linking between slides is easy. In the following example, the first link points to the index of another slide, and the second link points to the ID property of another slide (<section id="some-slide">):

Link to slide 4

Overview and full screen mode

Click the "Esc" or "o" key to switch the overview mode. When you are in this mode, you can still navigate between slides.

Just press the »F« button on your keyboard to enter full screen mode. Press the »ESC« button to launch the full screen mode.

Embed pictures and links


Click to view tutorial