<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)
alt-enter: Join presentation in speaker view (from active slide)

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 or close control panel

These are based on the PowerPoint shortcuts.

Custom Events & Public Methods

key-control/toggleKeyControl(): toggle keyboard navigation shortcuts
follow-active/toggleFollowActive(): follow along with the active slide saved in localStorage (for linking across multiple tabs)
control-panel/toggleControlPanel(): toggle the control panel
reset/reset(): go to the first slide
join/join(): turn on keyboard control, and follow active slides
resume/resume(): join in public (slideshow) view
start/start(): reset, and then resume
join-as-speaker/joinAsSpeaker(): join in private (speaker) view
blank-slide/blankSlide(): toggle the white or black blank slide overlay
next/next(): go to the next slide
previous/previous(): go to the previous slide
to-slide/toSlide(): go to a specific slide
to-saved/toSavedSlide(): go to the active slide saved in localStorage
scroll-to-active/scrollToActive(): scroll the active slide into view
full-screen/toggleFullScreen(): toggle fullscreen mode

Add the slide-event, to-slide, or set-view attributes to any <button> element in a slide deck for quick control of these events:

<button slide-view="speaker">speaker view</button>
<button slide-event="next">go to the next slide</button>
<button slide-event="control-panel">toggle the control panel</button>
<button to-slide="6">go to slide number six</button>

Installation

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

Install via npm: npm install @oddbird/slide-deck
Download the source manually from GitHub into your project.
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!