الشريط الدوّار
Carouselaria-roledescription="carousel"
اسمه كمانكاروسيل، سلايدر، شريط الشرائح، معرض منزلق، عارض دوّار، شرائح متحرّكة، slider، image slider، slideshow، content rotator، hero slider، banner rotator
الشريط الدوّار حاوية تعرض عدّة شرائح في مساحة واحدة، فتُظهر شريحة أو شريحة ونصفاً في كل لحظة، ولكل شريحة موضع معلوم يصل إليه المستخدم بالأسهم أو بالنقاط أو بالسحب. والموضع الحالي مملوك للمستخدم ومُعلَن ومرقّم: «٣ من ٦». وهو ليس الشريط الزاحف (marquee)، فذاك يزحف بلا توقّف ولا يعرف شريحة حالية ولا يملك المستخدم فيه العودة إلى ما فات، فهو زخرفة لا وسيلة تنقّل. وهو ليس قائمة أفقية قابلة للتمرير، فالقائمة تُدفع بالإصبع أو بعجلة التمرير وكفى، بلا أزرار وبلا دلالة «شريحة» في شجرة الوصول، وهي في صفوف المنتجات الخيار الأصحّ لأن الحافّة المقصوصة تكشف وحدها أن هناك بقيّة. ويفارق التبويبات (tabs) في نقطة واحدة: عنوان التبويب يصف اللوحة التي يفتحها، أمّا النقطة فلا تصف إلا رقم موضعها. وللعنصر تكلفة تستحقّ أن تُقال في كل مراجعة: ما بعد الشريحة الأولى لا يراه إلا قلّة من الزوّار، فلا تضع فيه سعراً ولا زرّ تسجيل ولا عرضاً تحتاج فعلاً أن يصل.
لو قلت عليه…
العيّنة الحيّة
تفاعل مع الديمو. كل الأجزاء حقيقية ومرقّمة.
تشريح العنصر: كل جزء واسمه
مرّر على أي سطر ليتحدّد مكانه في الديمو فوق.
برومبت البناء
سلوكه في الاتجاه من اليمين لليسار
الجزء ده حصري عندنا.
المحور المضمّن ينعكس وحده
ينعكسالشريحة الأولى تبدأ من اليمين في العربية والتقدّم يمضي نحو اليسار، وهذا يقع تلقائياً في حاوية التمرير وفي صفّ flex وفي صفّ النقاط، لأن المحور المضمّن يتبع direction. لا تعكسه مرّة ثانية: قاعدة flex-direction: row-reverse داخل [dir="rtl"]، أو عكس المصفوفة في جافاسكربت، تعيد الترتيب البصري إلى حالته الإنجليزية وتجعل ترتيب Tab يخالف ما تراه العين. الاستثناء مسار مبني على transform: translateX(calc(-100% * var(--i)))، فالتحويلات لا تعرف الاتجاه، فاضرب الإزاحة في var(--dir) واضبط --dir: -1 داخل [dir="rtl"].
السهمان: الموضع والرسم والوظيفة
ينعكسزرّ «السابق» يجلس عند البداية المنطقية، أي على اليمين في العربية، فثبّت الزرّين بـ inset-inline-start و inset-inline-end لا بـ left و right. ورسم السهم ينقلب معه: ضع scaleX(-1) على صنف تستعمله للأسهم وحدها، أو بدّل الأيقونتين. والوظيفة تنقلب كذلك، فـ«التالي» يمرّر نحو اليسار: اكتب el.scrollBy({ left: step * dir }) مع dir تساوي -1 في RTL، واقرأ ArrowLeft على أنه «التالي» في معالج لوحة المفاتيح.
إشارة scrollLeft
ينعكسالمحرّكات الحالية تبدأ من صفر عند الشريحة الأولى ثم تعطي قيماً سالبة كلّما تقدّمت، أمّا WebKit القديم فكان يبدأ من أكبر قيمة موجبة وينزل، و IE كان يعدّ صعوداً من الصفر. لذلك يعطي حساب مثل Math.round(scrollLeft / slideWidth) رقماً سالباً أو خاطئاً في العربية. ابتعد عن الإشارة كلّها: اقفز بـ slide.scrollIntoView({ inline: "start", block: "nearest" }) فهي قيمة منطقية أصلاً، واستخرج الشريحة الحالية بمقارنة getBoundingClientRect لكل شريحة بحافّة المنفذ المنطقية.
ما لا تقلبه CSS نيابةً عنك
ينعكسقيمة scroll-snap-align: start منطقية فتصير الحافّة اليمنى في العربية بلا تدخّل، و scroll-snap-type: inline تقول المقصود أدقّ من x. أمّا scroll-padding-left فيُبقي الحشو على اليسار بعد الانعكاس، فاكتب scroll-padding-inline-start. والأسوأ طبقة التظليل فوق صورة الشريحة، فلا التدرّجات ولا background-position تقبل قيماً منطقية أصلاً: تبقى linear-gradient(to right, …) و background-position: left center في مكانهما بعد الانعكاس، فلا حلّ إلا تجاوز صريح داخل [dir="rtl"].
ما داخل الشريحة يبقى كما رُسم
لا ينعكسصورة الشريحة، والشعار داخلها، وزرّ التشغيل والإيقاف في الشريط الذي يدور تلقائياً: كلّها تبقى كما هي في العربية. والسبب المعتاد في انقلابها قاعدة عامة من نوع [dir="rtl"] svg, [dir="rtl"] img { transform: scaleX(-1) }، فاقصر القلب على صنف تضعه على السهمين وحدهما. وأزرار التشغيل تشير إلى مسار الزمن لا إلى اتجاه القراءة، ولهذا يبقى المثلّث متّجهاً كما هو في اللغتين.
أسماؤه في الكود
كل سطر هو كلمة مكتبة واحدة عن نفس الشيء. خد السطر اللي بيكلّم مشروعك.
شوف كمان
آخر تحديث · 2026-08-19