Classic horizontal
CSS scroll-snap drives the motion. Arrows and dots scroll programmatically. Keyboard: ← → at any slide.
Carousel
Native scroll-snap horizontals, fade-stack, multi-up, with-thumbs, auto-advance. One markup contract, six shapes — keyboard, touch, pause-on-hover, all free.
Self-driving
Advances every 3 seconds. Hovering the track pauses; un-hovering resumes. Loops at the end.
Cross-fade · stacked
Slides occupy the same grid cell and fade in/out instead of sliding. data-active drives visibility.
Multiple items visible
Per-view scales with the container: 1 → 2 → 3 at 520/800. Arrows scroll one viewport width.
Thumbs strip below
Click a thumb to jump. The active thumb mirrors the visible slide. Pairs well with product galleries.
Pointer-events swipe
Swipe the track with a finger, mouse, or stylus — same pointer event chain. Arrow keys move when the track is focused.
Usage
Root: <div class="lsd-car" data-car>. Inside: .lsd-car__track with N .lsd-car__slide children. Prev/next/dots/thumbs wire up automatically.
data-auto="3000"· auto-advance interval (ms)data-loop="true"· wrap at the enddata-mode="fade"· cross-fade instead of slide (also requires.lsd-car--fade)data-thumbs="true"· render the thumb strip from slide contentdata-swipe="true"· enable pointer-driven swipe
Emits lsd:car:change with { index } after every transition.