انتقل إلى محتوى الدرس

Carousel Slides Markup هيكل الشرائح والشريحة النشطة

صمّم عارض الشرائح المتجاوب Carousel في بوتستراب 5 بجافاسكريبت القياسية، وتعلّم بناء الشرائح النشطة وأزرار التنقل والمؤشرات السفلية والعناوين التوضيحية وتأثير التلاشي وزمن الشرائح ودعم اللمس.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يعرض مكوّن Carousel سلسلة من الصور أو البطاقات الترويجية المتتالية بانتقالات CSS 3D Transforms سريعة وسلسة. يعتمد البناء الأساسي على غلاف .carousel.slide بمعرّف فريد، وبداخله حاوية الشرائح .carousel-inner التي تضم عناصر .carousel-item.

القاعدة الإلزامية الأهم: يجب إضافة الكلاس .active إلى شريحة واحدة فقط عند البداية وإلا سيظل العارض مخفياً بارتفاع صفر، كما يُنصح بمنح الصور الكلاسين .d-block و.w-100 لمنع محاذاة المتصفح الافتراضية للصور السطرية.

الصف 2 صورة توضيحية
تشريح مكوّن عارض الشرائح carousel وعلاقة الشريحة النشطة بالمؤشرات السفلية وأزرار التنقل
الصف 3 ملاحظة هامة