دوّار الصور · SDAIA Design System

صورة الكاروسيل

مكوّن كاروسيل صور يجمع الصور مع أسهم التنقّل ونقاط الترقيم لبانرات الصفحة الرئيسية ومعارض المنتجات.

Loading demo: carouselimage-real-world

npx sdaia-ui@latest add carouseimage

import { CarouselImage } from '@sdaia/ui';

<CarouselImage images={images} />;

الكاروسيل الافتراضي مع مؤشّرات التنقّل بالنقاط.

Loading demo: carousel-image-default

كاروسيل مع منطق التشغيل التلقائي.

Loading demo: carousel-image-autoplay

كاروسيل مع أسهم التنقّل.

Loading demo: carousel-image-subtle-arrows

خصائص مكوّن CarouselImage.

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