عرض دوّار

معرض تتنقل خلاله بطاقة واحدة في كل مرة. مبني على التمرير الأصلي مع CSS scroll-snap، لذا يعمل السحب باللمس وإيماءات لوحة التتبع والتمرير بلوحة المفاتيح تلقائياً؛ والأسهم ومؤشر الموضع هما الجزءان الوحيدان اللذان يحتاجان إلى JavaScript.

مطبخ دافئ
مطبخ دافئرسم توضيحي
قرش ورقي
قرش ورقيكولاج
سرطان البحر وجراد البحر
سرطان البحر وجراد البحردراسة الفرشاة
شروق الشمس
شروق الشمسزيت على قماش
حبّار الفضاء العميق
حبّار الفضاء العميقأنيمي
طباعة كتلة
طباعة كتلةالنمط
توقف متأخر
توقف متأخررسم توضيحي

التثبيت

يمكنك إضافة هذا العرض الدوّار باستخدام CLI الخاص بنا أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add carousel

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

عرض البطاقات

يملأ كل عنصر المسار افتراضياً، لذا تظهر بطاقة واحدة بالضبط في كل شريحة. يقع العرض على CarouselItem بدلًا من المسار، لذا فإن تجاوزه يمنح لمحة عن البطاقة التالية أو سلسلة من العروض المتباينة. تُقرأ المواضع من DOM بدلًا من حسابها من عرض بطاقة ثابت، لذا لا حاجة لإخباره عند تغيير تلك العروض.

{/* One card per slide is the default: items fill the track */}<CarouselItem>…</CarouselItem> {/* Override to show a peek of the next card, or to mix widths */}<CarouselItem className="w-[85%]">…</CarouselItem><CarouselItem className="w-[220px]">…</CarouselItem>

المحاذاة وعناصر التحكم

align="center" يضع كل بطاقة في منتصف المسار بدلاً من الحافة اليسرى، وهو ما يناسب معرضًا يعرض بطاقة بطولية واحدة في العرض. showArrows و showDots جرّد الواجهة حتى مسار قابل للتمرير بالإصبع، و gap يضبط التباعد بالبكسل.

مطبخ دافئ
مطبخ دافئرسم توضيحي
قرش ورقي
قرش ورقيكولاج
سرطان البحر وجراد البحر
سرطان البحر وجراد البحردراسة الفرشاة
شروق الشمس
شروق الشمسزيت على قماش
حبّار الفضاء العميق
حبّار الفضاء العميقأنيمي
طباعة كتلة
طباعة كتلةالنمط
توقف متأخر
توقف متأخررسم توضيحي
{/* Snap each card to the middle of the track */}<Carousel aria-label="Gallery" align="center" gap={24}>…</Carousel> {/* Bare track: no arrows, no dots, swipe only */}<Carousel aria-label="Logos" showArrows={false} showDots={false}>…</Carousel>

إمكانية الوصول

تُعلن المنطقة عن نفسها كعرض دوّار وتأخذ اسمها من aria-label، وهو مطلوب. تُوسم كل بطاقة بموضعها، فيقرأ قارئ الشاشة "3 من 7" دون أن تُرقّم أي شيء. المسار قابل للتركيز، فتُمرّره مفاتيح الأسهم، وتُعطَّل أزرار السابق/التالي عند الأطراف بدلًا من عدم الاستجابة بصمت. يحترم الانزلاق prefers-reduced-motion، بالقفز بدلًا من التحريك.