A fully responsive, high-performance product showcase component built with strict adherence to modern frontend engineering practices. This project demonstrates how to deliver complex interactive eCommerce design patterns (such as dynamic layouts, responsive grid behaviors, and interactive state changes) using minimal dependencies to maintain optimal Core Web Vitals.
- Vanilla JavaScript Architecture: Dependency-free slider and layout behavior keeping the initial bundle size incredibly small—crucial for eCommerce conversion rates.
- Tailwind CSS Styling: Rapid, utility-first styling ensuring pixel-perfect responsive design across mobile, tablet, and desktop viewports.
- Smart Mobile Adaptation ("Show More"): On mobile devices, only the first 4 products are displayed initially. A custom "Show More" button triggers a smooth dropdown animation to reveal the remaining products without blocking the main thread.
- Interactive UX States: * Image Swap on Hover: Smooth secondary image swapping on product hover with pre-loading patterns to avoid visual delay or jank.
- Custom Scrollbar UI: Enhanced accessibility with an interactive scrollbar that dynamically responds to hover and touch events.
- Semantic HTML5: Built from the ground up with SEO, accessibility (a11y), and structural best practices in mind.
- HTML5: Semantic markup for structure.
- Tailwind CSS: Utility-first framework for precise layouts and styling.
- JavaScript (ES6+): Plain Vanilla JS for all dynamic interactions.
- Clone the repository:
git clone https://github.com/GRandow/ecommerce-product-carousel.git
🌐 Live Project