--- /** * ImagesSlider — a full-bleed hero slider. Every image is rendered as a * stacked (they preload naturally, no client-side "loading" gate * needed); a custom element swaps a couple of classes to fade + fly the * outgoing slide up/down while the next one scales/fades into place. * Advances on ArrowLeft/ArrowRight (bound on window while connected) and * on an autoplay interval that pauses when the tab is hidden or the * slider leaves the viewport. */ interface Props { /** Image URLs for each slide, in order. */ images: string[]; /** Auto-advance to the next slide on an interval. */ autoplay?: boolean; /** Milliseconds between auto-advances. */ interval?: number; /** Direction the outgoing slide flies toward. */ direction?: 'up' | 'down'; /** Render a dark scrim over the slides so overlay content stays legible. */ overlay?: boolean; /** Additional classes for the scrim element. */ overlayClassName?: string; /** Additional classes for the root element. */ class?: string; } const { images, autoplay = true, interval = 5000, direction = 'up', overlay = true, overlayClassName, class: className, } = Astro.props; ---

{ images.map((src, index) => ( {`Slide

)) }

{overlay &&

Installation

Install dependencies

Add these files

Configuration

Use it