Image Slider

Full-bleed image slider with crossfade-zoom, autoplay, dots, arrows and swipe.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/image-slider.json

Adds components/velora/image-slider.tsx, installs motion.

A landing hero with a headline and call-to-action layered over an autoplaying slider.

Spring collection · 42 new listings

Architect-designed houses with open plans, big glass and quiet gardens, ready to move into this season.

Prop	Type	Default
`images*` Images to cycle through	`SliderImage[]`	`—`
`children` Content layered above the images (headline, call-to-action…)	`React.ReactNode`	`—`
`autoplay` Advance automatically (never starts on its own under reduced motion)	`boolean`	`true`
`interval` ms each slide stays on screen while autoplaying	`number`	`5000`
`scrim` Darken the images so overlay text and controls stay legible	`boolean`	`true`
`label` Accessible name for the carousel region	`string`	`"Image slider"`

Also accepts every React.HTMLAttributes<HTMLElement> prop, forwarded to the root element.

interface SliderImage {
  /** Image URL */
  src: string;
  /** Alternative text ("" when the image is purely decorative) */
  alt: string;
}

Reduced motion: Autoplay never starts on its own and slides change instantly with no fade or zoom; pressing Play opts in to autoplay with instant changes.
Keyboard: Previous, next, pause/play and dot buttons are native buttons; Left/Right arrows (and Home/End) change slides while focus is inside the slider. Autoplay pauses while hovered or while focus is inside.
Screen readers: A region with aria-roledescription="carousel" whose current slide is a group labelled "n of N"; image alt text is read, and slide changes are announced politely only while autoplay is not running.