Lens Carousel

Photographs pinched by a lens across the row: full size at either rim, smallest through the middle. The strip's top and bottom edges each trace an ellipse arc. Rather than drifting, the row rests on a card then slides smoothly to the next one - and you can take over any time with the chevrons or by dragging the strip, which settles back onto whole cards when you let go. Hovering halts the auto-advance.

Installation

npx stepwise-ui add lens-carousel

Default

import { LensCarousel } from '@/components/stepwise/lens-carousel'

<LensCarousel items={photos} />

Props

PropTypeDescription

items

LensCarouselItem[]

Images to loop. { src, alt? }.

ratio

number

Card height ÷ width. Default 1.5.

minScale

number

Scale at the centre of the row - the pinch. Default 0.6.

maxScale

number

Scale at either rim - the largest cards get on screen. Default 1.

autoplay

boolean

Advance on its own. Default true.

interval

number

Seconds a card rests before the row advances. Default 2.4.

transition

number

Seconds one slide takes. Default 0.85.

controls

boolean

Show the prev / next chevrons. Default true.

draggable

boolean

Allow dragging the row left and right. Default true.

itemWidth

number

Card width at full size, px. Default 124.

gap

number

Space between cards, px. Default 10.

radius

number

Card corner radius. Default 16.

reverse

boolean

Travel left-to-right instead.

pauseOnHover

boolean

Halt travel while hovered. Default true.

className

string

Merged onto the root.