Image Carousel
An accessible image carousel with spring animations, keyboard navigation, auto-play, and reduced motion support.
npx arupui add image-carousel
Preview
Slide 1 of 3Minimalist Design
Clean lines and simple forms create timeless elegance.
Usage
image-carousel.tsx
import { ImageCarousel } from "@/components/blocks/image-carousel"
<ImageCarousel
slides={[
{ id: 1, image: "/img1.jpg", title: "Slide 1", description: "Description" },
{ id: 2, image: "/img2.jpg", title: "Slide 2", description: "Description" },
]}
autoPlay
grayscale={false}
/>Props
| Prop | Type | Default |
|---|---|---|
slides | ImageCarouselSlide[] | [] |
grayscale | boolean | true |
autoPlay | boolean | false |
autoPlayInterval | number | 5000 |
slidesType:
ImageCarouselSlide[]Default: []grayscaleType:
booleanDefault: trueautoPlayType:
booleanDefault: falseautoPlayIntervalType:
numberDefault: 5000