البرومبت
Act as a senior front-end developer with 8+ years of experience building interactive web components. Create a detailed step-by-step guide for implementing a responsive carousel slider using vanilla JavaScript. Include [AUTO-PLAY functionality with pause on hover], [TOUCH GESTURE support for mobile devices], and [LAZY LOADING for images]. Explain how to handle [INFINITE LOOPING] without duplicating DOM elements, implement [ACCESSIBILITY FEATURES] like ARIA labels, and add [CUSTOM TRANSITION EFFECTS] between slides. Provide code snippets for each feature and explain the performance considerations when dealing with [LARGE IMAGE COLLECTIONS]. The solution should work across all modern browsers and be easily customizable for different [DESIGN SYSTEMS].
أسئلة شائعة
ما هي فوائد استخدام سلايدر كاروسيل في الموقع؟▼
يُحسّن تجربة المستخدم، يعرض محتوى متعدد في مساحة محدودة، ويزيد من جاذبية التصميم.
هل يمكن إنشاء سلايدر كاروسيل بدون مكتبات خارجية؟▼
نعم، يمكن تنفيذه باستخدام JavaScript خالص (Vanilla JS) دون الحاجة لمكتبات مثل jQuery.
ما هي الخطوات الأساسية لبناء سلايدر كاروسيل؟▼
1- تصميم الهيكل بـ HTML. 2- تنسيق العناصر بـ CSS. 3- إضافة التفاعل بـ JavaScript.
كيفة جعل السلايدر متجاوبًا مع جميع الشاشات؟▼
استخدم وحدات CSS المرنة مثل (rem، vw) ووسائط الاستعلام (@media queries).
هل يمكن إضافة تأثيرات انتقالية بين الشرائح؟▼
نعم، عبر CSS (transition/animation) أو JavaScript (توقيت التبديل).
ما أفضل ممارسات SEO لسلايدرات الكاروسيل؟▼
استخدم صورًا مُحسّنة، أضف نصوصًا بديلة، وتأكد من قابلية الفهرسة.