الرئيسية
الصفحة الرئيسية
في هذه الصفحة
كاروسيل أساسي (تلقائي) مع أزرار التحكم مع المؤشرات مع النصوص (Captions) تأثير التلاشي (Fade) التحكم بسرعة العرض
صفحات أخرى
الأزرار التنبيهات المودال البطاقات

الكاروسيل (Carousel)

الكاروسيل هو مكون لعرض مجموعة من العناصر (الصور أو النصوص) بشكل متتالٍ (Slider). يدعم الانتقال التلقائي، أزرار السابق/التالي، والمؤشرات.

التوثيق الرسمي

1. كاروسيل أساسي (انتقال تلقائي)

مكون من carousel-inner وداخله مجموعة من carousel-item. يجب إضافة active على أول عنصر.

المعاينة
صورة 1
صورة 2
صورة 3
شرح الكود:
  • carousel slide: الكلاس الأساسي، و slide يضيف تأثير الانزلاق.
  • data-bs-ride="carousel": لتشغيل الكاروسيل تلقائياً عند تحميل الصفحة.
  • carousel-inner: الحاوية التي تضم الشرائح.
  • carousel-item: كل شريحة. أول شريحة يجب أن تحتوي على active.

2. مع أزرار التحكم (Controls)

إضافة أزرار التالي والسابق. تأكد أن الـ data-bs-target في الأزرار مطابق تماماً لـ id الكاروسيل.

المعاينة
شرح الكود:
  • id="carouselExampleControls": معرف (ID) فريد للكاروسيل.
  • data-bs-target="#carouselExampleControls": في أزرار التحكم، هذا يخبر البوتستراب بأن هذه الأزرار تتحكم بالكاروسيل الذي يحمل هذا المعرف.
  • data-bs-slide="prev" و next: تحدد اتجاه الحركة عند الضغط على الزر.
  • carousel-control-prev-icon: أيقونة السهم الجاهزة من بوتستراب.

3. مع المؤشرات (Indicators)

المؤشرات السفلية التي تبين لك في أي شريحة أنت الآن. تتطلب توافق data-bs-slide-to مع ترتيب الصور (يبدأ من 0).

المعاينة
شرح الكود:
  • carousel-indicators: الحاوية التي تضم المؤشرات (النقاط أسفل الصور).
  • data-bs-slide-to="0": عند الضغط على هذا المؤشر سينقلك للصورة الأولى (العد يبدأ من 0).
  • يجب إضافة كلاس active للمؤشر الأول ليتطابق مع الصورة الأولى المفتوحة أصلاً.

4. إضافة نصوص توضيحية (Captions)

ضع carousel-caption داخل أي carousel-item لإظهار نص فوق الصورة.

المعاينة
شرح الكود:
  • carousel-caption: حاوية النص الذي سيظهر فوق الصورة.
  • d-none d-md-block: تقوم هذه الكلاسات بإخفاء النص على الشاشات الصغيرة (لأنها قد تشوه الصورة) وتظهره فقط بدءاً من الشاشات المتوسطة (Tablets فما فوق).
  • استخدمنا style="filter: brightness(0.6)" لتغميق الصورة قليلاً حتى يظهر النص الأبيض بوضوح.

5. تأثير التلاشي (Crossfade)

أضف carousel-fade لتغيير طريقة الانتقال من الإزاحة الأفقية إلى تأثير التلاشي التدريجي.

المعاينة
شرح الكود:
  • carousel-fade: يُضاف إلى الكلاسات بجانب carousel slide. وظيفته تحويل الأنيميشن الافتراضي (الذي ينزلق لليمين أو اليسار) إلى تأثير ذوبان/تلاشي ناعم بين الصور.

6. التحكم بسرعة العرض (Interval)

يمكنك تحديد وقت عرض كل شريحة (بالملي ثانية) عبر إضافة data-bs-interval="1000".

المعاينة (صورة كل ثانية)
شرح الكود:
  • data-bs-interval="1000": يُضاف للـ carousel-item لتحديد كم ملي ثانية ستبقى هذه الشريحة معروضة قبل الانتقال للتالية.
  • 1000 ملي ثانية تعني ثانية واحدة. الافتراضي في بوتستراب هو 5000 (أي 5 ثوانٍ).
  • يمكنك إعطاء كل صورة مدة مختلفة (مثلاً الصورة الأولى 10 ثوان، والثانية ثانيتين فقط).