Depth carousel

What's included

A band of cards you drag with the mouse, which coasts on when you let go and turns endlessly, in two files: a stylesheet and a script. No dependencies, no build step, no external requests — you copy them into a project and it works.

The rail isn't a home-made carousel: it's an ordinary overflow-x: auto. The browser already knows how to scroll it with the wheel, the trackpad, a finger, the scrollbar and the arrow keys — off the main thread, with the platform's own physics. The script replaces none of that: it adds dragging, inertia, looping and tilt on top.

Features

• Auto-advance — the band drifts on its own at 60 px/s, the speed measured on the model, and stops under the pointer, under keyboard focus, during a gesture, in a hidden tab and under reduced motion.
• Drag and inertia — the band follows the pointer, then carries on with the deceleration measured on the model. Touch keeps the native scrolling, which is better than anything a script can imitate.
• An endless loop — the cards are cloned on mount and the position folds back by a whole set when you go past. You write nine cards, not twenty-seven.
• Optional depth — one class is enough: the cards tilt and recede according to their distance from the centre. The script only publishes that distance, the amounts stay in the CSS.
• Works without JavaScript — the band still scrolls, and its scrollbar stays visible until the script takes over, since it's then the only handle.
• One variable for the scale — card, gutter, corner radius, shadow, spacing and text size all derive from --dc-font-size.
• Three kinds of card — image, video, and a text panel shipped in three tints, each with its own measured type scale.

Dropping it into a page

Two files to load, then the markup:

<link rel="stylesheet" href="depth-carousel.css">
<script src="depth-carousel.js" defer></script>
<div class="depth-carousel" data-depth-carousel data-label="Our work">
  <div class="depth-carousel__rail">
    <ul class="depth-carousel__track">
      <li class="depth-carousel__slide">
        <article class="depth-carousel__card">
          <img class="depth-carousel__media" src="…" alt="…">
        </article>
      </li>
    </ul>
  </div>
</div>

That's it: the data-depth-carousel attribute is enough, the component installs itself on load. The veils at the edges are drawn by the stylesheet, there's nothing to write for them. To change the look, one variable is enough — --dc-font-size rescales everything, --dc-scene-height sets the height of the band, --dc-veil-opacity: 0 removes the veils.

In an application, DepthCarousel.init(element) returns an instance carrying next(), goTo() et destroy() — enough to mount and unmount it cleanly in a render that repeats.

What you should know

• The wheel doesn't block the page. Only a horizontal intent — a sideways trackpad gesture, Shift + wheel — moves the band along. The model hijacks every wheel event, vertical ones included, which traps the page's scroll for as long as the pointer is over it: data-wheel="capture" brings that behaviour back if you really want it.
• The card is in fixed pixels — 270 × 431, the same from 390 to 1920 wide. Only the track's padding follows the window, and it's what lets the first and last cards settle in the centre.
• No inline styles, no inline scripts. The component honours the site's strict security policy and never uses innerHTML: the clones go through cloneNode, the depth through two CSS variables. Checked by serving the folder under CSP, not assumed.
• The design comes from elsewhere. The proportions follow those of a Framer code component, measured on the real page once hydrated. The code itself is original, and the nine demo visuals are built locally by the test bench's script.