A simple, lightweight (~ 3 kB gzipped) and modern (ECMAScript 2020) presentation tool powered by web technologies, featuring:
- Presenter mode with index, timer, notes and cloned view
- Slide auto-scaling to preserve appearance
- Overview mode and black screen
- Various navigation controls
- Create a standard HTML 5 file
- Import
diapo.min.js
anddiapo.min.css
- Create slides:
body.diaporama>.diapos>.diapo*n
- Add speaker notes:
.diapo>.notes
(optional) - Initialize the slideshow:
const diapo = new Diapo();
⌨️ Key / 🖱️ Wheel | Description |
---|---|
→ ↓ PgDn Space 🖱️↓ | Navigate to the next slide |
← ↑ PgUp 🖱️↑ | Navigate to the previous slide |
Home | Navigate to the first slide |
End | Navigate to the last slide |
O | Toggle the overview mode |
P | Toggle the presentation mode |
C | Open the clone view (in presentation mode) |
Esc Enter | Return to the default mode |
B | Toggle the black screen (in default mode) |
T | Reset the timer |
The following CSS classes are provided by default and can be used on div.diapo
elements:
- Vertical content alignment: ⬆️
top
(default),↕️ middle
, ⬇️bottom
- Horizontal text alignment: ⬅️
left
,↔️ center
, ➡️right
- Slide themes: ☀️
light
(default), 🌑dark
- Columns layout:
.row>.col*n
Navigate to a slide ("prev"
, "next"
, "first"
, "last"
or a zero-indexed
slide number):
diapo.navigate("next")
Toggle a mode ("overview"
, "presenter"
or "show"
= default):
diapo.toggleMode("presenter")
Open the detached view, controlled from the presenter mode:
diapo.openClone()
Toggle the black screen:
diapo.toggleBlackScreen()
Subscribe to events:
diapo.on("navigationEnd", (e) => console.log(`Navigated to ${e.index}`))
Name | Arguments (e ) |
Description |
---|---|---|
navigationStart |
{index, element} |
Before navigating to a slide |
navigationEnd |
{index, element} |
After navigating to a slide |
modeToggle |
{mode} |
After changing mode |
cloneOpen |
{window} |
After opening the clone view |
Diapo is licensed under the MIT License.