آموزش رایگان ساخت کروسل پیشنهادهای شگفت‌انگیز سایت دیجی کالا با Html | Css | Bootstrap | Jquery | Swiper | Timerjs | Nicescroll

آموزش رایگان و پروژه محور ساخت کروسل پیشنهادهای شگفت انگیز

کروسل پیشنهاد شگفت‌انگیز یکی از بخش‌های جذاب صفحه اصلی فروشگاه‌های اینترنتیه که محصولات تخفیف‌دار رو با جزئیات کامل نشون می‌ده. در این مینی پروژه قراره با HTML، CSS، Bootstrap و چند پلاگین جاوااسکریپت، این بخش رو مشابه دیجی کالا بسازیم.

این کروسل با نمونه قبلی تفاوت داره. اینجا هر اسلاید یه بخش کامله که تصویر محصول سمت راست و اطلاعاتش سمت چپ قرار گرفته. تصویر محصول با یه bage تخفیف مورب مشخص شده و کنارش تایمر شمارش معکوس نمایش داده می‌شه.

بخش اطلاعات شامل عنوان محصول، ویژگی‌هاش به صورت لیست، نوار پیشرفت فروش و قیمته. قیمت قدیم با خط خورده و قیمت جدید با رنگ سبز و فونت درشت‌تر نمایش داده می‌شه. دکمه افزودن به سبد خرید هم پایین این بخش قرار گرفته.

سمت چپ کروسل، یه لیست عمودی از محصولات قرار داره. این لیست با Swiper جداگانه ساخته شده و اسلایدهاش به صورت عمودی چیده شدن. هر آیتم این لیست یه عنوان کوتاه داره و با کلیک روش، اسلایدر اصلی به همون محصول می‌ره.

اتصال بین اسلایدر اصلی و لیست کناری با قابلیت thumbs انجام شده. یعنی اسلایدر کناری مثل بندانگشتی عمل می‌کنه و اسلایدر اصلی رو کنترل می‌کنه. آیتم فعال توی لیست با یه خط آبی سمت راست مشخص می‌شه.

اسلایدر اصلی افکت fade داره و هر ۵ ثانیه به صورت خودکار اسلاید بعدی رو نشون می‌ده. لیست کناری هم اسکرول سفارشی داره که با NiceScroll پیاده‌سازی شده و ظاهرش با اسکرول پیش‌فرض فرق داره.

استایل‌دهی این بخش کاملاً سفارشیه. کادر سفید با گوشه‌های گرد، bage تخفیف چرخیده، دکمه قرمز با سایه آبی و نوار پیشرفت آبی، همه با CSS پیاده‌سازی شدن. در صفحات موبایل، لیست کناری مخفی می‌شه و به جاش نقاط صفحه‌بندی پایین اسلایدر نمایش داده می‌شن.

نکته کاربردی این پروژه، یادگیری اتصال دو اسلایدر به همدیگه و مدیریت اسکرول سفارشیه. این هماهنگی بین اجزا باعث می‌شه کاربر کنترل کاملی روی محتوا داشته باشه.

در نهایت یه کروسل پیشنهاد شگفت‌انگیز کامل داری که می‌تونی ازش در پروژه‌های شخصی خودت استفاده کنی. سورس کامل پروژه به صورت رایگان در دسترسه تا کدها رو بررسی کنی.

اگه می‌خوای این بخش‌ها رو در قالب یه پروژه فروشگاهی یکپارچه پیاده کنی، آموزش ساخت قالب دیجی کالا می‌تونه مسیر بعدی‌ات باشه.