Add drag-to-scroll, center snapping, and infinite loop to any horizontal container. Keep your own markup and styles — just enhance scrolling.
import DragCarousel from 'drag-scroll-carousel'; const carousel = new DragCarousel('#product-strip', { speed: 1.5, centerMode: true, loop: true, slideSelector: '.card', buttons: { prev: '#prev', next: '#next' }, }); // Cleanup when done carousel.destroy();
Native-feeling pointer-based scrolling with configurable speed multiplier.
Snaps to the nearest slide and centers it after drag ends. Buttons move by slide.
Seamless looping by cloning slides. Works even with very small slide sets.
Pointer events work on desktop and mobile. No separate touch handler needed.
~3 KB total. Zero dependencies. Ships as a single class you can drop anywhere.
Use with vanilla JS, React, Shopify Liquid, or any HTML. Includes destroy() for cleanup.
| Option | Type | Default | Description |
|---|---|---|---|
| speed | number | 1.5 | Pointer-movement to scroll multiplier |
| buttons | object | null | null | { prev, next } — any valid querySelector string |
| centerMode | boolean | false | Snap to nearest slide and center it |
| loop | boolean | false | Infinite looping with cloned slides |
| slideSelector | string | null | null | Selector for slides (defaults to direct children) |
| minLoopSlides | number | 3 | Min visual slide count for loop cloning |
One install. One class. Drop it into any project and scroll beautifully.
npm install drag-scroll-carousel
Works everywhere