Carousel · slides
Slides that glide or cross-fade — swipe and drag with resistance at the ends, arrows, dots with an autoplay countdown, thumbnails, several cards at once or peeking neighbours, and keyboard control.
Autoplay · the dot counts down · hover or focus pauses · drag, swipe or ← →
Showing slide 1 of 5 — the index is a signal you can read or set.
Fade · thumbnails
Several at once · no loop · no autoplay
Peeking neighbours
Usage
import { signal, html } from "./index.js";import { Carousel } from "./components/carousel.js"; const at = signal(0); // the current slide — read it, or set it to jumpCarousel({ items: slides, render: (s, i) => html`<img src=${s.src} alt=${s.alt}>`, value: at, aspect: "16/9", interval: 5000 }) // 0 = no autoplay Carousel({ items, render, effect: "fade", indicators: "thumbs", thumb: (s) => html`<img src=${s.thumb}>` })Carousel({ items, render, perView: 3, gap: 14, loop: false, interval: 0 }) // a row of cardsCarousel({ items, render, peek: 56 }) // neighbours show// drag / swipe with a flick, ← → Home End, pauses on hover / focus / hidden tab