Swipe Images

What it does

A stack of images you scrub through by moving the cursor across it — left to right, like flipping through a pile with your thumb.

There's no clicking and no arrows. The position of the cursor is the control, so the whole set is reachable in one gesture.

Where you would use it

Product colourways. A project shown from several angles. A before, during and after.

It suits sets where the images are variations of one thing — because scrubbing implies the images belong on a continuum. A set of unrelated pictures feels wrong under this interaction, however good each one is.

Great for product galleries, portfolios, and visual comparisons

Controls

12 controls, 6 of which only appear when they are relevant.

Working through the panel

Images and behaviour

Images is your list, in order.

On Leave decides what happens when the cursor goes away: stay on the image the visitor stopped on, or return to the first. Returning is better on a hero, because the section resets to a known state. Staying is better in a product grid, where the visitor's choice is meaningful.

Fit and Radius handle framing, and Cursor sets what the pointer becomes — the default already suggests horizontal movement, which is most of the affordance this component gets.

The indicator

Indicator is on by default and it should stay on. It's a row of segments showing which image you're on out of how many — and without it, a visitor has no idea the stack has five images rather than two.

Once it's on you get its position, the active and inactive colours, thickness, inset from the edge, and the gap between segments.

Keep the inactive colour visible rather than nearly transparent. The point is showing how many there are, and you can't count segments you can't see.

Performance and limits

• Static rendering is handled, so canvas thumbnails and exports show a settled frame rather than a blank box.