Carousel

A row of slides that scrolls sideways and snaps to each one, with no JavaScript.

Put the slides inside .carousel. Swipe, scroll or use the keyboard to move. Where the browser supports scroll buttons and scroll markers, the carousel also gets previous and next buttons and a dot for each slide. Give it tabindex="0" and an aria-label, so keyboard users can reach and scroll it in every browser.

Classless

Plain HTML is styled with no class.

Themes

Light and dark in every color.

Layers

Your own CSS always wins.

Variables

Change any value with one property.

Accessible

Focus rings, ARIA states and user preferences.

The buttons sit over the edges of the carousel. With text slides, give the carousel side padding, the same scroll-padding-inline, and a --i-carousel-gap a little wider than the padding. The buttons then sit in empty gutters beside the text, and the next slide stays out of sight.

Images

Any element can be a slide, usually a figure. The photos come from Picsum.

Iris CSS

A road winding through green hills — Hills

Tents in the snow below mountain peaks — Camp

A waterfall in a green forest — Waterfall

Granite cliffs above a forest river — Valley

A person by a misty mountain river — River

An orange jellyfish in blue water — Jellyfish

A lioness looking at the camera — Lioness

Slide width

Set --i-carousel-item-width on the carousel. A value of 100% shows one slide at a time.

<div class="carousel" style="--i-carousel-item-width: 100%">...</div>

Variables

Variable	Default
`--i-carousel-item-width`Width of each slide. Lower it to show several at once.	`100%`
`--i-carousel-gap`	`var(--i-spacing)`
`--i-carousel-button-size`	`2.5rem`
`--i-carousel-marker-size`	`0.625rem`