Carousel Image
An image carousel component combining images with navigation arrows and pagination dots for hero banners and product galleries.
'use client'; import { CarouselImage } from 'sdaia-ui'; const slides = [Installation
npx sdaia-ui@latest add carouseimage
Usage
import { CarouselImage } from '@sdaia/ui';<CarouselImage images={images} />;Examples
Default
The default carousel with dot navigation indicators.
<CarouselImage images={images} />Autoplay
Carousel with autoplay logic.
<CarouselImage images={images} autoplayMs={3000} />Subtle Arrows
Carousel with navigation arrows.
<CarouselImage images={images} arrowVariant="subtle" dotsVariant="on-color"/>API Reference
CarouselImageProps
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' | 'on-color' | optional |
dotsSize | 'sm' | 'md' | 'lg' | 'sm' | optional |
radiusClassName | string | 'rounded-[12px]' | optional |
ariaLabel | string | 'Image carousel' | optional |
