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

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

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

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

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

چیدمان اسلایدها با Swiper انجام شده و واکنش‌گراست. توی صفحات کوچیک، هر بار یه اسلاید نمایش داده می‌شه. در صفحات متوسط، دو اسلاید کنار هم قرار می‌گیرن و در صفحات بزرگ‌تر، سه اسلاید هم‌زمان دیده می‌شن. این تنظیمات با breakpoints انجام شده تا کاربر توی هر دستگاهی تجربه مناسبی داشته باشه.

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

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

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

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

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