Slide-Deck Web Component

Progressive Enhancement

Fallback to semantic HTML

JavaScript is needed for using keyboard shortcuts or opening the control panel. The markup and styles are all there on first-load.

Just HTML

Slide notes are also HTML

In script view the active slide-item will have a larger canvas size and the font-size of an active slides speaker notes is increased for easier readability.

This is a heading level 4

This paragraph exists to test a variety of content within slide-notes. While some slides may not have any notes at all, others may have extremely verbose notes and may contain many details.

Blockquote example within the slide-notes to test a few different content types.

Speaker Notes

<div>
  <div slide-canvas>
    This slide has both a canvas
  </div>
  <div slide-note>
    And a section for notes
  </div>
</div>

To add speaker notes, a slide should contain two children: using the slide-note and slide-canvas attributes.

• A slide with these internal parts will be labeled as a slide-item="container"
• A slide without nested parts will get both slide-item="canvas" and also the slide-canvas attribute

Always available:

• command-k: Toggle control panel
• command-shift-enter: Start presentation (from first slide)
• command-enter: Resume presentation (from active slide)

Windows and Linux users can use Ctrl instead of Command.

Starting a presentation takes you into full-page slide view, with keyboard controls on, and following active-slide changes in local-storage (in case you are using multiple tabs for differnt views).

Key-Control On:

• N / right-arrow / down-arrow / page-down: Next slide
• P / left-arrow / up-arrow / page-up: Previous slide
• home: First slide
• end: Last slide
• W / ,: Toggle white screen
• B / .: Toggle black screen
• escape: Blur focused element, close control panel

When the key-control feature is turned on, these extra shortcuts are available. To turn them on by default, add the key-control attribute to your slide-deck.

Add Your Own Controls

Using the control-panel slot

(or style what's there with the provided parts)

You can slot-in your own control panel or blank slide template, by providing dialog elements with slot="control-panel" or slot="blank-slide".

<button slide-event>previous<button>

Buttons with the slide-event attribute will send custom events to the slide-deck when activated. The event can be specified in the attribute (slide-event="next") or it will be inferred from the inner text of the button.

<button set-view>solo<button>

Buttons with the set-view attribute will set the slide-view attribute on the slide-deck when activated. The view can be specified in the attribute (set-view="grid") or it will be inferred from the inner text of the button.