@oddbird/slide-deck

slide-deck

A Web Component for web presentations.

Demo

⚠️ This is a pre-release: Breaking changes will be allowed in minor versions until we achieve a stable v1.0 release

Examples

General usage example:

<script type="module" src="slide-deck.js"></script>

<slide-deck>
  <header><h1>This is a slide show</h1></header>
  <div><h2>Each child is a slide</h2></div>
  <div>
    <h2>We can add our own controls</h2>
    <p>Based on event handlers</p>
    <button slide-event>previous</button>
    <button slide-event>next</button>
    <p>Or specifically for changing views</p>
    <button set-view>grid</button>
    <button set-view>list</button>
  </div>
</slide-deck>

Define a simple fallback view:

<style>
  slide-deck:not(:defined) {
    display: grid;

    > * {
      border-block-end: thin solid;
    }
  }
</style>

Set initial state with attributes, or define your own view:

<script type="module" src="slide-deck.js"></script>

<slide-deck key-control slide-view="fancy">
  <header><h1>Listening for arrow keys</h1></header>
  <div><h2>And using a fancy view</h2></div>
</slide-deck>
<style>
  slide-deck[slide-view="fancy"] {
    outline: 1px solid red;
  }
</style>

Features

This Web Component allows you to:

• Create web-based slides
• Switch between different slide views
• Control presentations with a remote, or a keyboard
• Follow along in a second tab (speaker view)
• Toggle full-screen mode

Keyboard Shortcuts

Always available:

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

Windows and Linux users can use Ctrl instead of Command.

When presenting (key-control is active):

• N/rightArrow/downArrow/pageDown: Next slide
• P/leftArrow/upArrow/pageUp: Previous slide
• home: First slide
• end: Last slide
• W/,: Toggle white screen
• B/.: Toggle black screen
• escape: Blur focused element, close control panel, or end presentation

These are based on the PowerPoint shortcuts.

Installation

You have a few options (choose one of these):

1. Install via npm: npm install @oddbird/slide-deck
2. Download the source manually from GitHub into your project.
3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<link rel="stylesheet" href="slide-deck.css">
<script type="module" src="slide-deck.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<link rel="stylesheet" href="https://www.unpkg.com/@oddbird/slide-deck/slide-deck.css">
<script
  type="module"
  src="https://www.unpkg.com/@oddbird/slide-deck/slide-deck.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<link rel="stylesheet" href="https://esm.sh/@oddbird/slide-deck/slide-deck.css">
<script
  type="module"
  src="https://esm.sh/@oddbird/slide-deck"
></script>

Credit

With thanks to the following people:

• David Darnes for the Web Component repo template

Support

At OddBird, we enjoy collaborating and contributing as part of an open web community. But those contributions take time and effort. If you're interested in supporting our open-source work, consider becoming a GitHub sponsor, or contributing to our Open Collective.

❤️ Thanks!

Changelog

v0.1.2 - 2024-01-16

• 💥 BREAKING: Disabled the full-screen keyboard shortcut, until we have a chance to address the various fullscreen browser issues
• 💥 BREAKING: Removed the 'end presentation' event and keyboard shortcuts, which were more confusing than useful
• 💥 BREAKING: Removed the shadow DOM content wrapper, and all shadow DOM styles for slide layout
• 💥 BREAKING: The reset event targets the first slide rather than the slide-deck container
• 🚀 NEW / 💥 BREAKING: Renamed and added control-panel parts, to allow for more customization of the default panel including pressed buttons with :part(button pressed)
• 🚀 NEW: Set aria-current='true' on active slide
• 🚀 NEW: View settings are maintained across page refresh using sessionStorage
• 🚀 NEW: Add support for slide parts – slide-canvas & slide-note
• 🚀 NEW: Each slide is labeled with either slide-item='container' (if it has nested parts) or slide-item='canvas' slide-canvas (if there are no nested parts)
• 🚀 NEW: The slide-deck has a --slide-count property, and each slide has a --slide-index
• 🚀 NEW: Default styles are in slide-deck.css and can be applied from the light DOM
• 🚀 NEW: The entire control panel can be replaced from the light DOM using slot=control-panel on a slotted dialog element
• 🚀 NEW: Blank slides are implemented as shadow DOM dialogues, which can be replaced from the light DOM using slot=blank-slide on a slotted dialog element
• 🚀 NEW: When key-control is activated (including on-load), we target the stored active slide (or the first slide)
• 🚀 NEW: Support for keyboard shortcuts on Windows/Linux using control instead of command
• 🐞 FIXED: Slotted controls are no longer treated as slides
• 🐞 FIXED: When restoring the active slide from memory, we go to the first slide if there's no stored state
• 🐞 FIXED: Use any key to exit a blank-slide mode