@vysmo/slideshow Component DOM Built on Transitions

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

Slide14paused

Transition

light-leak

Behavior

Mode

Input

Easing

Duration

2000 ms

Autoplay delay

2.00 s

Chrome

Arrows

Arrow style

Dots

Dot style

Counter

Progress

Captions

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);
});

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.

Read the full docs