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

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

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

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

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

با hover روی کارت، سه دکمه شناور ظاهر می‌شن: مقایسه محصول، افزودن به علاقه‌مندی و مشاهده سریع. کنارشون هم رنگ‌بندی محصول نمایش داده می‌شه. هر کدوم از این دکمه‌ها با نگه داشتن موس روش، یه tooltip توضیحی نشون می‌دن که با پلاگین Hint پیاده‌سازی شده.

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

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

استایل‌دهی این بخش کاملاً سفارشیه. پس‌زمینه قرمز با یه پترن ظریف، کارت‌های سفید با گوشه‌های گرد و سایه ملایم، و یه دایره تزئینی گوشه کارت‌ها، همه با CSS پیاده‌سازی شدن. دکمه‌های ناوبری هم شکل نیمه‌گرد دارن و با بقیه اسلایدرها متفاوت هستن.

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

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

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