USER INTERFACE · MEDIA

Carousel

Slides, galleries and swipeable rows. Drag, swipe or use ← →. Every photo is a slot — drop your own.

THEME

DENSITY

Playground

Build your carousel — compare with the default

PREVIEWdrag, swipe, ← → keys3 differences

1 / 8

SPRING 27 · 01Mývatn at dawnNordic Thread

Mývatn at dawnNordic Thread

1 / 8

Settings

TYPE

default: Slide

RATIO

default: 16:9

INDICATOR

default: Dots

Reduce motion is on — autoplay is off.

DIFF FROM DEFAULT

− type="slide"+ type="peek"+ counter+ autoplay={5000}

Variants

Hero, card row, gallery, stories

Herofade · autoplay 5 s · pills · pause

1 / 4

CASE STUDYMývatn at dawnNordic Thread · Spring 27

Mývatn at dawnNordic Thread · Spring 27

1 / 4

Card rowpeek · arrows · progress

1 / 6

Mývatn at dawnSpring 27

1 / 6

Galleryslide · thumbnails · counter

1 / 6

1 / 6

Stories3:4 · tap left / right · bars

1 / 4

MÝVATN · DAY 106:12 — call timeSwipe-free · tap the sides

06:12 — call timeSwipe-free · tap the sides

1 / 4

Navigation

Arrows, dots, counter, progress

Arrows insideglass · 40 px

1 / 5

1 / 5

Arrows outsidein the header row

Selects1 / 5

1 / 5

Dotsactive widens to 22 px

1 / 5

1 / 5

Counter + progress3 / 6

1 / 6

1 / 6

In Avava

Onboarding, portfolio, testimonials, dashboard

Onboarding4 steps · Skip · Get started

1 / 4

✦Your studio, in one placeProjects, calendar, chat and invoices finally talk to each other.

1 / 4

Project portfolioclick a photo → fullscreen

1 / 8

NORDIC THREADMývatn at dawnSpring 27 · Selects

Mývatn at dawnSpring 27 · Selects

1 / 8

Click the photo to open it fullscreen. Esc closes.

Client testimonialstext slides · autoplay 6 s

1 / 3

“The proofing flow saved us a week of email.

Lena HolmNordic Thread · Head of Marketing

1 / 3

Dashboard rowmulti · 3 per view · arrows outside

Active projects1 / 4

Spring 27 campaignNordic Thread · Post

Kaya website v2Kaya Ceramics · Review

Parka lookbookFjord Outdoor · Shoot

1 / 4

States

Loading, single, empty, error

Loadingskeleton keeps the size

Single slideno arrows, no dots

1 / 1

SELECTSHero 04Approved by Lena

Hero 04Approved by Lena

1 / 1

With one item the controls are hidden — it’s just an image.

Emptyinvite to add

🖼No photos yet

Errorretry one slide

Couldn’t load photo 3 of 8The other 7 are fine.

Rules & a11y

Motion, keyboard, sizes

Motion

✓Pause on hover and focusAutoplay stops while the pointer or keyboard focus is inside.

✓Visible Pause buttonAnything that moves for more than 5 s needs a way to stop it.

✓Respect Reduce motionprefers-reduced-motion turns autoplay off and slides jump without animation.

!Autoplay ≥ 5 sLong enough to read the caption twice.

Screen readers & keyboard

Regionrole="region" aria-roledescription="carousel" aria-label="Featured work"

Sliderole="group" aria-roledescription="slide" aria-label="Slide 3 of 8"

Hidden slidesaria-hidden="true" on slides out of view

Dots<button aria-label="Go to slide 2" aria-current="true">

KeysFocus the carousel · ← → move · Tab reaches arrows and dots

Sizes

Arrow40 px · glass · 12 px inset

Dot8 px · active 22 px (pills 34)

Thumbnail72 × 50 · 2 px active ring

Swipe threshold50 px

Transition450 ms cubic-bezier(.2,.8,.2,1)

Fade550 ms ease

CarouselA few items where one at a time is the point — a story or a showcase.Hero, portfolio, onboarding

GridMany items people need to compare or scan.Project list, file manager

TabsDifferent kinds of content under one heading.Overview / Files / Invoices

DO✓Keep it to 3–8 slides✓Show where you are: dots, counter or progress✓Let people swipe and use the keyboard✓Pause on hover, focus and Reduce motion✓Peek the next item so people know there’s more

DON’T✕Hide important actions on slide 4✕Autoplay faster than 5 s✕Use a carousel instead of a grid for many items✕Make arrows the only way to move✕Autoplay video with sound