تصميم مواقع الويب | كيفية عمل سلايدشو احترافي متوافق على موقعك

السلايدشو أو المعرض المتحرك كما يحلو للبعض تسميته ، كما نرى في بعض المواقع تلك الصور المتحركة التي تتبدل تلقائيا بعد ثوان قليلة ، مع العلم أنه يمكن وضع أي محتوى ظاهر في السلايدشو وليس فقط الصور.

لنصمم سلايدشو نستخدم HTML و CSS ولكن لتفعيله نحتاج إلى أكواد جافاسكريبت أو استخدام مكتبة jQuery ، والأفضل من ذلك هو وجود إضافات تساعدك على عمل السلايدشو بكل سهولة ، وأحد أفضل هذه الإضافات على الإطلاق إضافة BxSlider فهي تمكن المصممين من عمل سلايدشو احترافي ومتوافق مع كل الأجهزة مع إمكانية التعديل .

تحميل الإضافة من موقع Github :

الدخول إلى الموقع الرسمي من خلال الرابط التالي ثم الضغط على Github .

رابط الموقع الرسمي

ثم تحميل ملفات الإضافة بالضغط على Code ثم Download zip .

بعد فك الضغط عن المجلد نحصل على التالي :

ربط مشروعنا الخاص بالإضافة :

لو قلنا بأن هذا هو مشروعنا الذي نعمل عليه .

سنذهب لملفات الإضافة ونفتح مجلد dist .

ثم ننسخ الملفين المؤطرين بالأحمر ونضعهما في مجلد js ننسخ الملف المؤطر بالأزرق ونضعه في مجلد css ثم نفتح مجلد images في نفس المسار وننسخ منه صور controls ونلصقها في مجلد img الخاص بنا .

كتابة الكود :

في ملف index.html سنقوم باستدعاء ملفات الجافاسكريبت و CSS التي أضفناها للمشروع بالإضافة لملفاتنا الخاصة ، ثم نكتب كود HTML وهوعبارة عن ul مع الكلاس bxslider وتحتوي على أكثر من li وداخل كل واحدة منها صورة من اختياري ، يمكنك أيضا وضع نصوص مكان الصور أو أي محتوى آخر .

بعد ذلك نفتح ملف CSS الخاص بالإضافة jquery.bxslider.css ونعدل على مسار صور controls ، سنجد في كل url مسار /images/ سنغيره إلى ../img/ نفعل ذلك مع كل url .

وأخيرا سنفتح ملف main.js الخاص بنا ونضع فيه الكود التالي :

والنتيجة ستكون كالتالي :

يمكنك تحميل الملفات من هنا وبإمكانك مشاهدة المزيد من الشرح في الفيديو التالي :

دمتم في رعاية الله وحفظه.