Slide Directive
The basic of all presentations is the slide directive.
Basic example:
@@@ slide
# My Presentation
This Preasentation was made by Paradox and reveal.js
@@@
Vertical Slides
Use Paradox default pattern for nesting slides.
@@@ slide
@@@@ slide
## Vertical Slides
Slides can be nested inside of each other.
@@@@
@@@
Configuration Options
Slides can be configured by several configuration options. All options are optional by default.
Basic Configuration
- id
- class
- style
For internal navigation between slides use the id option.
@@@ slide { id=my-slide }
Slide with custom id
@@@
Slide Transition
Every slide transition can be indivudual configured.
- transition (value can be: none, fade, slide, convex, concave, zoom)
- transitionSpeed (value can be: normal, slow, fast)
Example:
@@@ slide { transition=zoom transitionSpeed=fast }
Slide with custom transition
@@@
Color Background
All CSS color formats are supported, including hex values, keywords, rgba() or hsl().
- color
{ color=#dddddd }
Image Background
By default, background images are resized to cover the full page. Available options:
| Attribute | Default | Description |
|---|---|---|
| image | URL of the image to show. GIFs restart when the slide opens. | |
| size | cover | See background-size on MDN. |
| position | center | See background-position on MDN. |
| repeat | no-repeat | See background-repeat on MDN. |
| opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
Example:
@@@@ slide { repeat=true size=cover image='https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png' }
## Image Backgrounds
@@@@
Video Background
Automatically plays a full size video behind the slide.
| Attribute | Default | Description |
|---|---|---|
| video | A single video source, or a comma separated list of video sources. | |
| loop | false | Flags if the video should play repeatedly. |
| muted | false | Flags if the audio should be muted. |
| size | cover | Use cover for full screen and some cropping or contain for letterboxing. |
| opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
Iframe Background
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 interactive attribute.
| Attribute | Default | Description |
|---|---|---|
| iframe | A single video source, or a comma separated list of video sources. | |
| interactive | false | Flags if the video should play repeatedly. |