Lightweight Vanilla JS Carousel with Touch Support – Driftbox

Driftbox is a lightweight image carousel slider built on the native Web Components API that supports touch drag, autoplay cycling, and responsive layout.

It registers as a custom <drift-box> HTML element. The element scopes its internal styles and markup with Shadow DOM.

Features:

• Runs as a native HTML custom element for drop-in use in standard markup.
• Touch and mouse drag navigation with a 50px movement threshold for slide commits.
• Autoplay cycling at a configurable per-slide interval.
• Pause-on-hover behavior for autoplay, active on pointer-capable devices only.
• Dot indicators for manual slide navigation and current position tracking.
• Infinite slide looping with clean wraparound at the track’s start and end.
• Automatic layout recalculation on container size change.
• Horizontal alignment control with left, center, and right positioning options.

How To Use It:

1. Download and load Driftbox as an ES module.

<script type="module" src="./src/driftbox.js"></script>

2. Place your images directly inside the <drift-box> as children. Driftbox reads them via a <slot> and builds the slider track from them. All available configuration options:

• autoplay (boolean): Starts slide cycling automatically on page load.
• interval (number, ms): Sets the milliseconds between slide advances during autoplay. The default is 3000.
• pause-on-hover (boolean): Stops autoplay when the cursor is over the slider. This only activates on devices that report hover capability.
• pagination (boolean): Renders a row of dot indicators below the slider track.
• rounded (boolean): Applies a 10px border-radius to the slider track corners.
• left (boolean): Left-aligns the slider on the page.
• center (boolean): Centers the slider on the page. This is the default alignment.
• right (boolean): Right-aligns the slider on the page.

<!-- Configure the carousel with attributes directly on the element -->
<drift-box autoplay interval="5000" pause-on-hover pagination rounded>
  <img src="1.jpg" alt="Alt 1" />
  <img src="2.jpg" alt="Alt 2" />
  <img src="3.jpg" alt="Alt 3" />
</drift-box>

3. The carousel fills 100% of its host container height by default. Set explicit width and height values in your stylesheet.

drift-box {
  width: 75%;
  height: 400px;
}

4. Control the slider programmatically by calling methods directly on the DOM node.

// Select the custom element from the DOM
const myCarousel = document.querySelector('drift-box');
// Advance to the next slide manually
myCarousel.next();
// Return to the previous slide manually
myCarousel.prev();

Alternatives:

• Swiper: A feature-rich touch slider with dozens of built-in effects.
• Glide.js: A modular, dependency-free slider with a clean event system.
• Splide: A lightweight, accessible slider with built-in keyboard navigation, ARIA attributes, and lazy loading support.