Carousel

نصب

pnpm dlx @simurgh-ui/cli add carousel

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from '@simurgh-ui/react/carousel';
import '@simurgh-ui/styles/carousel.css';

Vue همین partها و Angular کامپوننت‌های متناظر را از subpath carousel صادر می‌کنند.

پیش‌نمایش واقعی

Live component Carousel ◆

Design system

Shared accessible patterns for product teams.

استفاده

<Carousel label="پروژه‌های منتخب" direction="rtl">
  <CarouselContent>
    <CarouselItem>سیستم طراحی</CarouselItem>
    <CarouselItem>مستندات</CarouselItem>
  </CarouselContent>
  <CarouselPrevious>›</CarouselPrevious>
  <CarouselNext>‹</CarouselNext>
</Carousel>

صفحه‌کلید

Tab viewport و کنترل‌ها را طبق DOM طی می‌کند. Arrow چپ و راست slide قبلی و بعدی را فعال می‌کنند و mapping آن‌ها در RTL معکوس می‌شود. Previous و Next باید accessible name روشن داشته باشند.

دسترس‌پذیری

Carousel را با label نام‌گذاری کنید و جایگاه هر slide را قابل‌درک نگه دارید. پخش خودکار اگر اضافه می‌شود باید قابل توقف باشد و با reduced motion سازگار شود. محتوای خارج از slide فعال نباید focusهای گم‌شده ایجاد کند. loop را فقط وقتی فعال کنید که بازگشت از انتها به ابتدا برای کاربر قابل‌پیش‌بینی باشد.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.