Reference

<deck-root> API

Programmatic surface · navigation methods, lifecycle, and the keyboard event you can intercept.

Reactive properties

Property	Type	What it controls
`current`	`number` (state)	Index of the active slide (0-based).
`step`	`number` (state)	Current step within the active slide (0 = first reveal).
`overview`	`boolean` (reflected)	Toggles the overview mode.
`transition`	`string` (reflected)	Lazy-loads the transition plugin. See Plugins · transitions.
`autoplay`	`number` ms (reflected)	Auto-advance interval. `0` disables. Pauses on hover, resets on user nav.
`loop`	`boolean` (reflected)	Wrap around at the deck edges (carousel mode).
`swipe`	`boolean` (reflected)	Enable pointer-driven horizontal swipe navigation (touch + mouse).

Carousel mode

Combine autoplay, loop, swipe and transition to turn a deck into a fully-functional carousel. The four attributes are mutually independent · you can use any subset.

carousel

<!-- Carousel mode · auto-advance every 4 s, wrap at end, swipe enabled -->
<deck-root autoplay="4000" loop swipe transition="slide">
  <deck-feature>
    <h1 slot="title">Slide 1</h1>
  </deck-feature>
  <deck-feature>
    <h1 slot="title">Slide 2</h1>
  </deck-feature>
  <deck-feature>
    <h1 slot="title">Slide 3</h1>
  </deck-feature>
</deck-root>

Behaviour notes:

Autoplay pauses while the pointer is over the deck and while the overview is open.
Any keyboard navigation resets the autoplay countdown so a manual nudge doesn't double-jump.
Swipe threshold is 60 px horizontal and at most 2× the vertical drift · accidental vertical scrolls are ignored.
Swipe is automatically disabled inside links, buttons, inputs, and other interactive children.

Built-in key bindings

Key	Behavior
`←` `→`	Section nav · linear fallback at edges
`↑` `↓`	Sub-slide nav · linear fallback at section boundaries
`Space` `PgDn`	Linear next
`PgUp`	Linear previous
`Home` `End`	First / last slide
`O`	Toggle overview · lazy-loads `deck-overview.js` on first press
`P`	Toggle presenter window · lazy-loads `deck-presenter.js`
`?` `H`	Open help · lazy-loads `deck-help.js` on first press
`B` `.`	Black screen (clicker convention) · any key dismisses
`W` `,`	White screen (clicker convention) · any key dismisses
`Esc`	Close any overlay / blank screen

URL hash

The canonical URL is #N · slide N (1-indexed, flat). Other forms accepted on input only:

#C.N · chapter C, sub-slide N · rewritten to flat.
#N.s · slide N at step s.

Step-reveal in `<deck-code>`

Reveal subsets of lines progressively. step-groups is a JSON array of arrays · each inner array lists the 1-based line numbers to highlight at that step. Step 0 = all lines visible at full opacity.

A 3-step code reveal

<deck-code lang="js" hero step-groups='[[1,2],[3,4],[1,2,3,4,5]]'>
  const a = 1;
  const b = 2;
  function sum() {
    return a + b;
  }
  sum();
</deck-code>

Extending

To add a layout or atom, write a class that extends LitElement, decorate it with @customElement('deck-myname'), and import the file from your deck. The new tag is immediately usable inside any slide · no registration step in deck-root.