Slideshow for the modern web.
Drop-in image slideshow driven by any of the 60 transitions. Opt-in chrome: arrows, dots, counter, progress bar, captions — each themeable via CSS custom properties. Click halves, keyboard, swipe, autoplay with pause-on-hover. Set every chrome option to false for pure-headless mode.
- ~2 KB gzipped
- 0 runtime deps
- 60 transitions to drive it
- headless BYO styling
$ pnpm add @vysmo/slideshow @vysmo/transitions View on GitHub light-leak
What you ship
Container element in, headless slideshow out. Click halves, arrow keys, autoplay, and pause-on-hidden are wired by default — opt out per option.
import { createSlideshow } from "@vysmo/slideshow";
import { paintBleed } from "@vysmo/transitions";
const show = createSlideshow({
container: document.querySelector("#stage")!,
slides: ["/01.jpg", "/02.jpg", "/03.jpg"],
transition: paintBleed,
transitionDuration: 900,
autoplayDelay: 4000,
});
show.on("change", (current) => {
console.log("now showing slide", current);
}); Using Next.js?
The slideshow accepts next/image optimizer URLs directly, with lazy mode for galleries that shouldn't decode every image on page load.
Read the Next.js guide →
Powered by
Slideshow composes @vysmo/transitions
(any of the 60 shaders, single or per-slide function),
@vysmo/animations (the progress tween), and
@vysmo/easings. Three small libraries, one drop-in
component.