إضافة العناوين ووصف الشرائح | عارض الشرائح Carousel في بوتستراب 5

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

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

يمكنك إدراج عنوان ووصف فوق أي شريحة عبر عنصر .carousel-caption داخل .carousel-item. ولأن الشاشات الهاتفية الضيقة قد تزدحم بالنصوص الطويلة فوق الصورة، يدمج المطورون عادةً كلاسَي العرض .d-none.d-md-block لإخفاء الوصف الفرعي على الهواتف الصغيرة وإظهاره ابتداءً من الأجهزة اللوحية فأعلى.

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

HTML

<div id="capCar" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#capCar"
      data-bs-slide-to="0" class="active"></button></div>
  <div class="carousel-inner"><div class="carousel-item active">
    <img src="/images/examples/header-banner.webp"
      class="d-block w-100" alt="Banner">
    <div class="carousel-caption d-none d-md-block">
      <h5>Cloud Studio</h5></div></div></div>
</div>

جرّب بنفسك

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

Responsive Slide Captions إضافة العناوين ووصف الشرائح

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

جميع فقرات هذا الدرس (عارض الشرائح Carousel في بوتستراب 5)