Website Image Slider in HTML CSS & JavaScript | عمل سلايدر احترافي لموقعك
السلام عليكم ورحمة الله وبركاتة
في هذا المشروع ، ستتعلم كيفية إنشاء شريط صورة ( سلايدر شو ) لموقع الويب.
ماهو السلايدر
يقصد بـ Website Image Slider الميزات الموجودة في رأس موقع الويب أو القسم العلوي حيث يمكن للمستخدم تحريك الصور بالنقر فوق زر التنقل أو عن طريق تحريك الماوس على الصورة أيضًا.
هناك ترقيم صفحات يوضح عدد الصور التي يحتويها موقع الويب في القسم.
يمكننا أن نرى هذا النوع من الميزات في العديد من أنواع المواقع مثل التجارة الإلكترونية ، والرياضة ، والصحف ، والسفر / الجولات ، وغيرها الكثير.
معاينة السلايدر
يمكنك معاينة السلايدر عن طريق مشاهدة الفيديو
لمشاهدة العرض التوضيحي لهذا المشروع وجميع الرسوم المتحركة التي أضفتها إلى هذا المشروع ، يمكنك مشاهدة الفيديو التعليمي ، وأيضًا من خلال مشاهدة الفيديو التعليمي ، ستحصل على فكرة عن كل الكود الذي استخدمته لإنشاء شريط تمرير الصورة هذا.
ألق نظرة سريعة على الصورة المحددة . كما ترى في الصورة ، هناك صورة تغطي الطول والعرض بالكامل.
يوجد على الجانبين الأيمن والأيسر زران للتنقل لتحريك الصورة ، يمكننا رؤية قسم ترقيم صفحات.
يوجد في المنتصف بعض النصوص والزر.
السلايدر متجاوب مع جميع احجام الاجهزة كما هو موضح في الفيديو
تحميل الكود البرمجي Source Code
لتحميل جميع رموز HTML CSS وجافا سكريبت والصور التي استخدمتها لإنشاء السلايدر ، تحتاج إلى النقر فوق "زر التنزيل" .
إرسال تعليق