→ البرمجة والكود
💻 البرمجة والكود 🤖 ChatGPT
إنشاء سلايدر كاروسيل باستخدام جافاسكريبت
JavaScript Carousel Slider Creation
البرومبت
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].

كيف تستخدم هذا البرومبت؟

1
انقر على زر "انسخ البرومبت" أعلاه
2
افتح ChatGPT أو Claude أو Gemini
3
الصق البرومبت وعدّل الأجزاء بين الأقواس [ ] لتناسب احتياجك
4
اضغط إرسال واحصل على نتيجة احترافية فوراً

أسئلة شائعة

ما هي فوائد استخدام سلايدر كاروسيل في الموقع؟
يُحسّن تجربة المستخدم، يعرض محتوى متعدد في مساحة محدودة، ويزيد من جاذبية التصميم.
هل يمكن إنشاء سلايدر كاروسيل بدون مكتبات خارجية؟
نعم، يمكن تنفيذه باستخدام JavaScript خالص (Vanilla JS) دون الحاجة لمكتبات مثل jQuery.
ما هي الخطوات الأساسية لبناء سلايدر كاروسيل؟
1- تصميم الهيكل بـ HTML. 2- تنسيق العناصر بـ CSS. 3- إضافة التفاعل بـ JavaScript.
كيفة جعل السلايدر متجاوبًا مع جميع الشاشات؟
استخدم وحدات CSS المرنة مثل (rem، vw) ووسائط الاستعلام (@media queries).
هل يمكن إضافة تأثيرات انتقالية بين الشرائح؟
نعم، عبر CSS (transition/animation) أو JavaScript (توقيت التبديل).
ما أفضل ممارسات SEO لسلايدرات الكاروسيل؟
استخدم صورًا مُحسّنة، أضف نصوصًا بديلة، وتأكد من قابلية الفهرسة.