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

Crossfade and Intervals تأثير التلاشي وزمن التقليب

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

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

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

لتحويل حركة الانزلاق الأفقي إلى تلاشي ضوئي ناعم بين الصور، أضف الكلاس .carousel-fade بجانب .carousel.slide. ولضبط التشغيل التلقائي منذ لحظة فتح الصفحة استخدم data-bs-ride="carousel"، أو data-bs-ride="true" ليبدأ الدوران التلقائي فقط بعد أول نقرة يدوية من المستخدم.

الفاصل الزمني الافتراضي لكل شريحة هو 5000 ملي ثانية (5 ثوانٍ)، ويمكنك تخصيص زمن مختلف لشريحة بعينها بوضع data-bs-interval="8000" على عنصر .carousel-item نفسه!

الصف 2 صورة توضيحية
مخطط خيارات التلاشي carousel-fade وضبط زمن الشريحة data-bs-interval ودعم السحب اللمسي
الصف 3 كود برمجي
HTML 
<div id="fadeCar" class="carousel slide carousel-fade"
  data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"
      data-bs-interval="6000">
      <img src="/images/examples/coastal-sunset.webp"
        class="d-block w-100" alt="Sunset"></div>
  </div>
</div>
جرّب بنفسك
الصف 4 معاينة حية

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