في هذا الدرس 6تصفّح المواضيع
يعرض مكوّن Carousel سلسلة من الصور أو البطاقات الترويجية المتتالية بانتقالات CSS 3D Transforms سريعة وسلسة. يعتمد البناء الأساسي على غلاف .carousel.slide بمعرّف فريد، وبداخله حاوية الشرائح .carousel-inner التي تضم عناصر .carousel-item.
القاعدة الإلزامية الأهم: يجب إضافة الكلاس .active إلى شريحة واحدة فقط عند البداية وإلا سيظل العارض مخفياً بارتفاع صفر، كما يُنصح بمنح الصور الكلاسين .d-block و.w-100 لمنع محاذاة المتصفح الافتراضية للصور السطرية.
لتمكين الزائر من التقليب اليدوي بحرية، أضف زري .carousel-control-prev و.carousel-control-next مرتبطين بمعرّف العارض عبر data-bs-target="#id" مع السمة data-bs-slide="prev" أو "next".
يحتوي كل زر على أيقونة السهم المرئية المعزولة عن القراءة بـ aria-hidden="true" وبجانبها نص وصفي مخفي بصرياً .visually-hidden لقارئات الشاشة:
<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-indicators في أسفل العارض عدد الشرائح الكلي وموضع الزائر الحالي بينها، وتتيح القفز المباشر لأي شريحة عبر الفهرس الصفري في السمة data-bs-slide-to="0"، "1"، "2" مع وضع class="active" وaria-current="true" على مؤشر الشريحة الأولى النشطة.
يمكنك إدراج عنوان ووصف فوق أي شريحة عبر عنصر .carousel-caption داخل .carousel-item. ولأن الشاشات الهاتفية الضيقة قد تزدحم بالنصوص الطويلة فوق الصورة، يدمج المطورون عادةً كلاسَي العرض .d-none.d-md-block لإخفاء الوصف الفرعي على الهواتف الصغيرة وإظهاره ابتداءً من الأجهزة اللوحية فأعلى.
<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>لتحويل حركة الانزلاق الأفقي إلى تلاشي ضوئي ناعم بين الصور، أضف الكلاس .carousel-fade بجانب .carousel.slide. ولضبط التشغيل التلقائي منذ لحظة فتح الصفحة استخدم data-bs-ride="carousel"، أو data-bs-ride="true" ليبدأ الدوران التلقائي فقط بعد أول نقرة يدوية من المستخدم.
الفاصل الزمني الافتراضي لكل شريحة هو 5000 ملي ثانية (5 ثوانٍ)، ويمكنك تخصيص زمن مختلف لشريحة بعينها بوضع data-bs-interval="8000" على عنصر .carousel-item نفسه!
<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>يدعم عارض الشرائح في Bootstrap 5 السحب بالإصبع على الهواتف والأجهزة اللوحية تلقائياً (ويمكن تعطيله عند الحاجة بسمة data-bs-touch="false"). ولإدارة العارض برمجياً في جافاسكريبت القياسية، استخدم bootstrap.Carousel.getOrCreateInstance(el) لاستدعاء .next() و.prev() و.pause() و.cycle() و.to(index)، مع قراءة خصائص الحدث slide.bs.carousel مثل event.from وevent.to.
<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>مرجع كلاسات وسمات وواجهة Carousel
| الكلاس / السمة | العنصر | الوظيفة القياسية في Bootstrap 5.3 |
|---|---|---|
.carousel-item.active | شريحة واحدة بالبداية | تحدد نقطة انطلاق العرض وإلا بقي العارض مخفياً. |
.carousel-fade | حاوية .carousel | يستبدل الانزلاق الأفقي بتأثير تلاشي شفافية متدرج. |
.carousel-dark | حاوية .carousel | يحوّل الأسهم والمؤشرات والنصوص للون الداكن للخلفيات الفاتحة. |
data-bs-interval | العارض أو الشريحة | يحدد مدة بقاء الشريحة بالملي ثانية (الافتراضي 5000). |
slid.bs.carousel | حدث DOM | ينطلق بعد انتهاء انتقال الشريحة ويحمل from وto. |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بناء مكوّن Carousel بشرط الشريحة النشطة .active، وإضافة أزرار السابق والتالي والمؤشرات السفلية والعناوين المتجاوبة، وتفعيل التلاشي .carousel-fade وضبط الأزمنة والتحكم البرمجي عبر bootstrap.Carousel. الخطوة التالية: انتقل الآن إلى درس تلميحات الأدوات Tooltips لتعلّم التفعيل الانتقائي بـ Vanilla JS وحماية التلميحات من ثغرات XSS.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Active Carousel Item الشريحة النشطة الابتدائية
- كلاس إلزامي يُضاف إلى شريحة واحدة فقط عند تحميل الصفحة ليظهر العارض ويبدأ التقليب منها.
- للمراجعة
- 02 Crossfade Carousel التلاشي المتدرج للشرائح
- إضافة كلاس carousel-fade لاستبدال الدفع الجانبي بانتقال شفافية ناعم بين الصور.
- للمراجعة
- 03 Carousel Indicators مؤشرات الشرائح السفلية
- أزرار شريطية أسفل العارض توضّح موقع الشريحة الحالية وتسمح بالقفز المباشر لأي فهرس.
- للمراجعة
- 04 Slide Interval الفاصل الزمني للشريحة
- المدة الزمنية بالملي ثانية التي تمكثها الشريحة قبل الانتقال التلقائي للتالية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CLS CLS
- Cumulative Layout Shift
- مقياس استقرار بصري نحافظ عليه بتوحيد ارتفاع ونسب أبعاد جميع صور العارض.
- للمراجعة
- 02 ARIA ARIA
- Accessible Rich Internet Applications
- سمات الإتاحة التي تعرّف أزرار المؤشرات السفلية والأسهم لقارئات الشاشة.
- للمراجعة
- 03 MS MS
- Milliseconds
- وحدة قياس الوقت المعتمدة في سمة الفاصل الزمني للشرائح حيث تعادل كل 1000 ثانية واحدة.
- للمراجعة
- 04 API API
- Application Programming Interface
- مجموعة الدوال البرمجية للتحكم الكامل بعارض الشرائح عبر جافاسكريبت.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ عارض شرائح بالمعرّف officeSlider يضم ثلاث شرائح مع تمييز الأولى بكلاس active، وإضافة مؤشرات سفلية للأرقام 0 و1 و2 وزري السابق والتالي.
-
أضف كلاس carousel-fade مع سمة data-bs-ride="carousel" للعارض، وخصّص زمن الشريحة الأولى بـ 6000 ملي ثانية والثانية بـ 3000 ملي ثانية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ماذا يحدث إذا لم يحمل أي عنصر من عناصر carousel-item كلاس active عند تحميل الصفحة؟
تكون جميع الشرائح مخفية افتراضياً، وكلاس active هو الذي يظهر الشريحة الابتدائية الأولى.
ما الكلاس الذي يحوّل انتقال الشرائح من الانزلاق الأفقي إلى التلاشي الضوئي الناعم؟
يُضاف كلاس carousel-fade بجانب carousel وslide لتفعيل تلاشي الشفافية.
ما السمة الصحيحة لضبط مدة عرض مخصصة قدرها 8 ثوانٍ لشريحة بعينها؟
تستقبل سمة data-bs-interval القيمة بالملي ثانية (8000 تعادل 8 ثوانٍ) على مستوى الشريحة أو العارض.
أي كلاس يعكس لون أسهم ومؤشرات العارض البيضاء إلى لون داكن ليناسب الشرائح الفاتحة؟
يوفّر كلاس carousel-dark تبايناً واضحاً للأسهم والمؤشرات فوق البطاقات والخلفيات البيضاء.
يبدأ ترقيم الشرائح في سمة data-bs-slide-to من الرقم 0 للشريحة الأولى.
تعتمد المؤشرات والدالة البرمجية to() الفهرسة الصفرية حيث تمثل 0 الشريحة الأولى.
يحتاج عارض الشرائح في بوتستراب 5 إلى إضافات jQuery خارجية لدعم السحب باللمس على شاشات الهواتف.
يدعم بوتستراب 5 السحب اللمسي أصلياً عبر أحداث اللمس والمؤشر القياسية دون أي إضافات خارجية.
أي حدث ينطلق بعد اكتمال انتقال الشريحة بالكامل ويزودك بخاصيتي from وto؟
ينطلق الحدث slid.bs.carousel فور استقرار الشريحة الجديدة بعد انتهاء حركة الانتقال.
يؤدي دمج الكلاسين d-none وd-md-block على عنصر carousel-caption إلى إخفاء الوصف على شاشات الهاتف الصغيرة وإظهاره ابتداءً من الشاشات المتوسطة.
تحافظ أدوات العرض المتجاوبة على وضوح الصورة على الجوال مع إظهار العنوان والوصف على الشاشات الأوسع.