An image carousel component combining images with navigation arrows and pagination dots for hero banners and product galleries.
Loading demo: carouselimage-real-world
npx sdaia-ui@latest add carouseimage
import { CarouselImage } from '@sdaia/ui';<CarouselImage images={images} />;The default carousel with dot navigation indicators.
Loading demo: carousel-image-default
Carousel with autoplay logic.
Loading demo: carousel-image-autoplay
Carousel with navigation arrows.
Loading demo: carousel-image-subtle-arrows
Props for the CarouselImage component.
Prop | Type | Default | Required |
|---|---|---|---|
images | CarouselImageItem[] | - | required |
activeIndex | number | - | optional |
defaultIndex | number | 0 | optional |
onChange | (index: number) => void | - | optional |
loop | boolean | true | optional |
autoplayMs | number | - | optional |
showArrows | boolean | true | optional |
showDots | boolean | true | optional |
size | 'sm' | 'md' | 'full' | 'md' | optional |
aspectRatio | string | matches `size` (12 / 7 for sm / md, 16 / 9 for full) | optional |
height | string | - | optional |
arrowVariant | 'brand' | 'neutral' | 'subtle' | 'outline' | 'on-color' | 'brand' | optional |
arrowSize | 'sm' | 'md' | 'lg' | 'md' | optional |
dotsVariant | 'brand' | 'neutral' | 'on-color' | 'brand' | optional |
dotsSize | 'sm' | 'md' | 'lg' | 'sm' | optional |
radiusClassName | string | 'rounded-[var(--ds-radius-m)]' | optional |
ariaLabel | string | 'Image carousel' | optional |
overlay | boolean | true | optional |