UI Carousels Catalog — 15 Named Patterns

.carousel-hero-image

Hero Image Carousel

Full-bleed photo slides with dots, prev/next, and pause. Autoplay when data-autoplay is set.

Coastal season

Quiet harbors, long light

Three days along the ridge with soft morning fog and late gold.

.carousel-testimonial

Testimonial Quote Slider

One quote + avatar per slide with a soft crossfade and arrow/dot controls.

The booking flow felt calm. We shipped the redesign without fighting the layout system.

Ava Morales

Product designer · Northstar

.carousel-pricing

Pricing Plan Carousel

Horizontal scroll-snap plan cards with peek of neighbors and arrow controls.

Starter

$12/mo

3 projects
Email support
Basic analytics

Growth

$29/mo

Unlimited projects
Priority support
Shared seats

Studio

$59/mo

Brand kits
SSO
Audit logs

Enterprise

Custom

Dedicated CSM
Custom SLA
On-prem option

.carousel-product-gallery

Product Gallery Slider

Main stage plus thumbnail strip that drives the active image.

.carousel-logo-marquee

Logo / Brand Marquee

Continuous logo row with pause on hover/focus. Use --stepped for scroll-snap instead of animation.

Trusted by field teams

Northstar Harbor Ridge Co Lumen Fieldkit Cascade

Stepped variant

Atlas Orbit Pine Bolt Cedar Nova

.carousel-feature

Feature Highlight Carousel

Icon + title + copy per slide with a progress bar and numbered steps.

Step 1 of 3

Map your sections

Name each slide’s job before you write copy — one purpose per panel.

.carousel-team

Team / People Slider

Portrait cards with role text, peek of the next card, and keyboard-friendly arrows.

Mira Solen

Studio lead

Theo Lang

Motion craft

Riley Chen

Support

Noah Park

Frontend

Leah Kim

Research

.carousel-compare

Before / After Compare Slider

Drag or keyboard the range handle to reveal the after image over the before.

Before After

.carousel-card-peek

Card Peek Carousel

Mixed content cards with a partial next-card peek and scroll-snap.

Article

Packing for ridge nights

A short list for cold camps without overpacking the daypack.

Read story

Product

Harbor Pour Set

Stoneware kit with a soft square silhouette for slow mornings.

Shop set

Event

Field Sketch Clinic

Saturday workshop on composition for trail notebooks.

Reserve spot

Guide

Coastal No. 7 walk

A half-day loop with ferry timing and coffee stops.

Open guide

.carousel-story-vertical

Vertical Story Slider

Full-height stacked panels with vertical snap, side dots, and up/down controls.

Chapter 01

Arrive at dusk

Ferry lights on the water, bags light, and a table waiting by the window.

Chapter 02

Walk the ridge

Switchbacks above the pines, then a quiet lunch on warm stone.

Chapter 03

Stay for the night market

Paper lanterns, grilled citrus, and a slow walk back to the pier.

.carousel-coverflow

Coverflow Carousel

Center-focused slides with scaled, rotated neighbors — classic coverflow depth.

Cliff light

Sunrise over the ridge path

.carousel-deck

Stacked Deck Slider

Cards stacked like a deck — advance reveals the next tip with depth.

Tip 01

Pack the layers flat

Roll shells last so the daypack stays balanced on switchbacks.

1 / 4

.carousel-ticker

Announcement Ticker

Continuous promo/news line with pause on hover, focus, or the pause control. Soft variant: --light.

News

Spring trails open — ridge huts bookable from May 1 Free shipping on daypacks over $80 Workshop Field Sketch Clinic · Sat 10:00

Update

New arrivals Harbor Pour Set is in stock Members early access ends Friday

.carousel-tabbed

Tabbed Panel Slider

Labeled tabs drive fading panels — arrow keys move between tabs.

Phase one

Design the section jobs

Give every panel one purpose before you write headlines or pick media.

Map audience intent
Name the CTA
Lock the content budget

.carousel-timeline

Timeline Scrubber Carousel

Horizontal year marks scrub fading story panels — milestones with prev/next.

2021

First field kit ships

A small run of daypacks sold out in two weekends — enough to fund the next molds.