الدرس 7 من 8

عارض شرائح

هدف الدرس

يدور ويعلن موضعه

01

الشرح

يُظهر عارض الشرائح شريحة واحدة وزرّين للتنقّل، ويعمل بالدوران، فالضغط على «التالي» عند الشريحة الأخيرة يعود بك إلى الأولى، والضغط على «السابق» عند الأولى ينقلك إلى الأخيرة.

ومن لا يرى الشاشة يحتاج إلى أن يعرف أين هو، فإذا وضعت مؤشّرًا مثل «2 من 4» داخل منطقة aria-live="polite" قرأه قارئ الشاشة بعد كل انتقال، فيعرف المستخدم موضعه وعدد الشرائح معًا.

انتبه: باقي القسمة في JavaScript يحتفظ بإشارة العدد، فناتج -1 % 4 هو -1 وليس 3، لذلك تحتاج عند الرجوع من الشريحة الأولى إلى (i + n) % n.

02

المطلوب

اجعل #next و#prev يُظهران الشريحة التالية والسابقة بالدوران، وأضف hidden إلى بقية الشرائح، ثم اكتب الموضع في #status بالصيغة 3 من 4، واجعله منطقة aria-live="polite".

الفحوص

6 فحوص
  1. شريحة واحدة فقط ظاهرة وهي الأولى
  2. «التالي» يُظهر الشريحة التالية وحدها
  3. المؤشّر يعلن الموضع «3 من 4»
  4. «التالي» بعد الأخيرة يعود إلى الأولى
  5. «السابق» قبل الأولى يذهب إلى الأخيرة
  6. المؤشّر منطقة حيّة
03

تلميحات

0/3
دروس المسارأتممت 0 من 8

تبني هنا بنفسك ومن الصفر مكوّنات تجدها في كل موقع تقريبًا، مثل التبويبات والنوافذ الحوارية والجداول والإشعارات وعارض الشرائح.

مستواه متقدّم، وفيه 8 دروس مجموع مدّتها ساعتان.

index.html
المعاينة
index.html100%
–/6

اضغط «تشغيل وتصحيح» ليبدأ الفحص.

تجد 6 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

تبني هنا بنفسك ومن الصفر مكوّنات تجدها في كل موقع تقريبًا، مثل التبويبات والنوافذ الحوارية والجداول والإشعارات وعارض الشرائح.

مستواه متقدّم، وفيه 8 دروس مجموع مدّتها ساعتان.