Slideshow example

This RSG 2.0 SDK app demonstrates the @roku-sdk/slideshow package with four rendering strategies. The following screenshot shows the virtual mode:

Variants

The example includes the following variants:

Config	Mode	Description
`roku-config-eager.ts`	Eager	All slides rendered and kept alive. Suited to small slide counts.
`roku-config-focus.ts`	Focus (Eager)	Eager mode with interactive slides containing nested `FocusBoundary` and focusable buttons.
`roku-config-pooled.ts`	Pooled	Slides drawn from an object pool. Suited to homogeneous slides with recycled templates.
`roku-config-virtual.ts`	Virtual	Only slides within a window around the current index are mounted. Suited to large slide counts.

Running

To run a variant, use these commands:

# Default (eager)
rk dev

# Specific variant
rk dev --config roku-config-virtual.ts

# Or build and sideload
rk build --config roku-config-pooled.ts
rk dev --no-build --out-dir dist-build

How it works

Each variant creates a slideshow using a different factory function from @roku-sdk/slideshow:

createSlideshow (eager and focus): Renders all slides in a horizontal strip. FocusBoundary with navigation="horizontal" handles navigation.
createPooledSlideshow: Uses a single useFocusable leaf with imperative onKey handlers. Pool templates render in createRoot outside the focus tree.
createVirtualSlideshow: Mounts and unmounts slides through <Show> based on proximity to currentIndex. onUnhandledKey drives navigation imperatively to avoid mount-timing issues with the virtual window.

Shared features

All modes support:

Chevrons: Left and right arrow indicators (customizable through the chevrons prop)
Dot indicator: Shows the current position (customizable through the dots prop)
Edge callbacks: onEdgeReached("first" | "last") fires at boundaries
Animated transitions: Configurable easing and duration through the animation prop
Programmatic control: The factory returns goTo(index), next(), and prev()

Controls

You can use these keys to navigate the app:

Left and Right: Navigate between slides
OK: Triggers the onSelect callback (if configured)