Carousel

CSS scroll-snap carousel — no JavaScript required. Supports horizontal/vertical direction, snap alignment, full-width slides, indicator buttons, and prev/next controls.

Snap to start (default)

Items snap to the left edge on scroll. Default behaviour.

carousel (snap start)

Snap to center

snap="center" — items snap to the centre of the viewport.

carousel-center

Snap to end

snap="end" — items snap to the right edge.

carousel-end

Full-width items

Add w-full to each carousel-item and its img — one slide fills the entire container width.

Full-width carousel

Half-width items

w-1/2 on each item — two slides visible at a time.

Half-width carousel

Vertical

direction="vertical" — scroll up/down instead of left/right.

carousel-vertical

Full-bleed with padding

Wrap in a coloured container with padding — each item gets its own rounded-box.

carousel-center + bg + padding

Indicator buttons

Give each item an id, then link anchor buttons below the carousel. The browser snaps to the target item on click — no JS needed.

Full-width + indicator dots

1234

Prev / next buttons

Absolute-positioned anchor buttons inside each item link to the previous and next slide by id. Wraps around (last ← first).

Full-width + in-slide controls

❮ ❯

❮ ❯

❮ ❯

❮ ❯

Card carousel

Carousel items don't have to be images — any content works.