Skip to content

Slideshow

Auto-advance controls for image collections.

image

Preview

Props & interactive options

Prop Type Default Description Try it
enable_slideshow url param 0 Expose the slideshow play/pause button (also enables loop).
slideshow_duration url param 5 Seconds each image stays on screen (2–15).
collection_display_mode url param drawer Collection navigation layout: drawer, bottom-bar, or sidebar.
Browsers block autoplay with sound. Enabling auto_play automatically enables muted so playback can start; viewers can then unmute manually.

Try it in the player

Pause on hover

The slideshow pauses automatically when the pointer enters the viewer and resumes when it leaves, so viewers can linger on an image without losing their place.

Documentation

Expose a slideshow play/pause button in the toolbar that lets viewers cycle automatically through the collection. Each image stays on screen for slideshow_duration seconds and the viewer cross-fades between them. Enabling the slideshow also makes the collection loop at the end. The transition respects prefers-reduced-motion and falls back to instant switches for viewers who opted out of animations. Note: enable_slideshow=1 only exposes the button — viewers start playback by clicking it.

Code

HTML

Frequently asked questions

No. The viewer uses the Page Visibility API to pause when the tab is hidden and resumes automatically when it becomes visible again, which saves CPU and respects viewers' focus.

By default the slideshow loops back to the first image. A future loop=0 flag will let you stop at the last image and expose an "Again" button instead.