MODRACX

← Archive & Insights

Crafting slider-js: A Zero-Dependency Touch Carousel Built for Speed

Popular carousel engines like Swiper or Slick often add significant bundle size and extra DOM wrappers to modern web projects. I developed slider-js to deliver a lightweight, touch-enabled carousel engine supporting infinite loops, auto-play timers, adaptive heights, and full accessibility out of the box.

By Kenneth D'SilvaReading Time: 13 min readCategory: UX & Design

1. Why Most Carousel Libraries Bloat Web Apps

Carousels are a staple for hero banners, product recommendations, and testimonial grids. However, legacy plugins like Slick require jQuery, while full-featured libraries like Swiper export massive feature trees that inflate initial JavaScript parsing times.

I built `slider-js` (`src/slider.js`, `src/controls.js`, `src/navigation.js`) to provide the essential 95% of carousel features—touch swipe drag physics, infinite loop wrapping, pagination dots, prev/next controls, keyboard arrow navigation, and auto-play—in under 4KB minified.

2. Architecture & Touch Gesture Physics

Touch drag physics utilize pointer events with momentum tracking. As the user drags across a slide, hardware-accelerated transforms updated via `requestAnimationFrame` track touch velocity. Releasing past the swipe threshold triggers an animated snap to the adjacent slide, while an abrupt release bounces back smoothly.

3. Open Source Repository

Explore slider-js on GitHub: github.com/Modracx/slider-js.