انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: عارض الشرائح Carousel في بوتستراب 5

Previous and Next Controls أزرار التنقل للسابق والتالي

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

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

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

لتمكين الزائر من التقليب اليدوي بحرية، أضف زري .carousel-control-prev و.carousel-control-next مرتبطين بمعرّف العارض عبر data-bs-target="#id" مع السمة data-bs-slide="prev" أو "next".

يحتوي كل زر على أيقونة السهم المرئية المعزولة عن القراءة بـ aria-hidden="true" وبجانبها نص وصفي مخفي بصرياً .visually-hidden لقارئات الشاشة:

الصف 2 كود برمجي
HTML 
<div id="heroCar" class="carousel slide">
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="/images/examples/workspace-wide.webp"
        class="d-block w-100" alt="Workspace"></div>
  </div>
  <button class="carousel-control-prev" type="button"
    data-bs-target="#heroCar" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
</div>
جرّب بنفسك

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