Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Full-screen slide-deck navigation in one node. Bundles wheel input, optional next/prev arrow clicks, optional nav-link clicks (matchIndex → seekTo), and the eased slideRouter. Compound: at load time it expands to `slideRouter` + `wheelGesture` + up to 3 `clickPulse` nodes + `pulseOr` (when 2+ advance sources). Outputs re-export the slideRouter outputs verbatim. Author can still bypass and wire the primitives by hand for one-off cases — slideDeck is purely additive.
Type slideDeckCategory inputsContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
currentIndex | float | Continuous interpolated index from the internal slideRouter. Lerps from prev to next during transition; equals `discreteIndex` at rest. Compound-aliased to `<id>__router.currentIndex`. |
discreteIndex | float | Most-recent latched integer target. Compound-aliased to `<id>__router.discreteIndex`. |
transitionProgress | float | Eased 0..1 during a transition; 0 at rest. Compound-aliased to `<id>__router.transitionProgress`. |
slideActivations | floatArray | Float[N] channel — entry i is slide i's activation 0..1. Use `floatArrayPick(index: i)` to fan out per-slide. Compound-aliased to `<id>__router.slideActivations`. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
slidesSelector | elementSelector | "" | CSS selector for slide elements. The internal `slideRouter` derives slideCount from `querySelectorAll(...).length` at bind. Required. |
navLinkSelector | elementSelector | "" | CSS selector for click-to-seek nav links. Each matched element becomes a click target; the matched-index is wired to `router.seekTo` so clicking the Nth link snaps to slide N. Leave empty to disable nav-link routing. |
nextArrowSelector | elementSelector | "" | Optional CSS selector for an explicit "next" arrow button. Click → `router.advance`. Leave empty if wheel + key gestures are enough. |
prevArrowSelector | elementSelector | "" | Optional CSS selector for an explicit "previous" arrow button. Click → `router.retreat`. |
wheelEnabled | bool | true | When true (default), expands an internal `wheelGesture` listening at window scope. Disable for pure click-driven decks. |
wheelAxis | axisChooser | "y" | Which delta channel(s) feed the wheel accumulator. Vertical for slide decks; horizontal for galleries. |
wheelThreshold | float | 60 | Accumulated |delta| required to fire a wheel pulse. min 1 |
wheelLockoutMs | float | 850 | Time-based debounce after each wheel pulse. Set ≥ `transitionDurationMs` so wheel events during a transition are ignored. min 0 |
wheelRestMs | float | 250 | Idle time after which the wheel accumulator resets to zero. min 0 |
transitionDurationMs | float | 800 | Slide transition time on the internal slideRouter. min 1 |
transitionEase | easingCurve | "easeInOutCubic" | Easing curve for the transition ramp. |
wrap | bool | false | When true, advance past the last slide loops to 0; retreat before 0 loops to last. |
Use cases
- Wheel-driven scrolljack deck — `slidesSelector: "[data-slide-id]"` + `nextArrowSelector: "#next"` + `wheelEnabled: true`. One scroll burst or arrow click advances.
- Hash-routed nav — `navLinkSelector: "[data-slide-link]"`. Each match gets a clickPulse listener; matchIndex → router.seekTo. Add `nextArrowSelector` for chrome.
- Bidirectional gestural deck — `nextArrowSelector` + `prevArrowSelector` for explicit advance/retreat buttons in addition to wheel.
- Per-slide colour drift / parallax — read `currentIndex` (continuous lerp) or `slideActivations` (Float[N]) downstream; same as wiring slideRouter directly.
Related nodes
Envelope
Use slideDeck as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-inputs/