رفتن به محتوای اصلی

کامپوننت‌ها

اسلایدر

نمایش چند کارت یا تصویر در یک ردیف قابل‌پیمایش، مثل محصولات پیشنهادی.

import { Carousel } from "@kashi-ui/react";

نمونه

<Carousel label="محصولات پیشنهادی" perView={2}>
{products.map((p) => <ProductCard key={p.id} {...p} />)}
</Carousel>

روی scroll-snap بومی مرورگر ساخته شده: با کشیدن انگشت، چرخ موس، دکمه‌ها و کلیدهای جهت کار می‌کند و در RTL خودکار درست است. چرخش خودکار ندارد، چون خواندن را برای همه، به‌خصوص کاربران صفحه‌خوان و کم‌بینا، سخت می‌کند.

نامنوعپیش‌فرضتوضیح
childrenReactNode—هر فرزند یک اسلاید
labelstring—نام اسلایدر (الزامی)
perViewnumber1تعداد اسلاید در هر نما؛ یا متغیر --k-carousel-per-view
dotsbooleantrueنقطه‌های پیمایش
labels{ prev?, next?, slide? }—متن دکمه‌ها و نام اسلایدها

دسترس‌پذیری

الگوی Carousel در WAI-ARIA: ظرف با aria-roledescription="اسلایدر" و هر اسلاید با نام «۲ از ۵». ریل اسلایدها فوکوس‌پذیر است و ←→ بین آن‌ها حرکت می‌کند؛ اسلاید فعال با aria-live اعلام می‌شود.