دعم اللمس والتحكم البرمجي | عارض الشرائح Carousel في بوتستراب 5

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

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

يدعم عارض الشرائح في Bootstrap 5 السحب بالإصبع على الهواتف والأجهزة اللوحية تلقائياً (ويمكن تعطيله عند الحاجة بسمة data-bs-touch="false"). ولإدارة العارض برمجياً في جافاسكريبت القياسية، استخدم bootstrap.Carousel.getOrCreateInstance(el) لاستدعاء .next() و.prev() و.pause() و.cycle() و.to(index)، مع قراءة خصائص الحدث slide.bs.carousel مثل event.from وevent.to.

الصف 2 كود برمجي

HTML

<div id="apiCar" class="carousel slide mb-2">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="p-4 bg-primary text-white">Slide 0</div>
    </div>
  </div>
</div>
<button id="jumpBtn" class="btn btn-sm btn-dark"
  type="button">Go to Slide 1</button>

جرّب بنفسك

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة

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

مرجع كلاسات وسمات وواجهة Carousel

الكلاس / السمة	العنصر	الوظيفة القياسية في Bootstrap 5.3
`.carousel-item.active`	شريحة واحدة بالبداية	تحدد نقطة انطلاق العرض وإلا بقي العارض مخفياً.
`.carousel-fade`	حاوية `.carousel`	يستبدل الانزلاق الأفقي بتأثير تلاشي شفافية متدرج.
`.carousel-dark`	حاوية `.carousel`	يحوّل الأسهم والمؤشرات والنصوص للون الداكن للخلفيات الفاتحة.
`data-bs-interval`	العارض أو الشريحة	يحدد مدة بقاء الشريحة بالملي ثانية (الافتراضي `5000`).
`slid.bs.carousel`	حدث DOM	ينطلق بعد انتهاء انتقال الشريحة ويحمل `from` و`to`.

الصف 6 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس بناء مكوّن Carousel بشرط الشريحة النشطة .active، وإضافة أزرار السابق والتالي والمؤشرات السفلية والعناوين المتجاوبة، وتفعيل التلاشي .carousel-fade وضبط الأزمنة والتحكم البرمجي عبر bootstrap.Carousel. الخطوة التالية: انتقل الآن إلى درس تلميحات الأدوات Tooltips لتعلّم التفعيل الانتقائي بـ Vanilla JS وحماية التلميحات من ثغرات XSS.

Carousel Touch and JS API دعم اللمس والتحكم البرمجي