Carousel · Combat UI

Media slides with overlaid content

Each slide is any element you slot with slot="slide". Compose media slides from the existing .cui-media-overlay block — a background <img> or <video> with overlaid eyebrow, title, copy, and cui-buttons. Add autoplay for a rotating hero; a pause control appears automatically and autoplay halts on hover, focus, reduced-motion, and hidden tabs.

Case study

Rebuilding the booking flow

A focused redesign that cut drop-off by 38% in six weeks.

Read the case

Product

A design system that ships

Baseline-modern web components with zero runtime dependencies.

Explore components

Careers

Build the web with us

We're hiring engineers and designers who care about craft.

See openings

Cross-fade

Slides dissolve into one another instead of sliding.

Same markup

Only the transition attribute changes.

transition accepts slide (default), fade, or none. Under prefers-reduced-motion: reduce the change is always instant and autoplay never starts.

Content slides

Slides aren't limited to media. Slot any markup — cards, quotes, stats — for a testimonial rotator or a "what's new" strip. Set loop="false" to clamp at the ends; the arrows disable instead of wrapping. Because the arrows overlay the slide, give content slides a --cui-carousel-content-inset so they sit in a side gutter beside the copy rather than on top of it.

"Combat UI let us ship a marketing site in days, not weeks."

— Sam R., Product Lead

"The two-tier API means our CMS markup just works."

— Dana K., Engineer

"Accessible by default saved us an entire audit cycle."

— Priya M., Designer

Fixed overlay & remote controls

Content slotted into slot="fixed" sits above every slide and stays put while slides change — perfect for a persistent CTA or brand mark. Position it with place-self. Drive the carousel from anywhere with data-cui-carousel-prev, data-cui-carousel-next, or data-cui-carousel-goto="<i>" on any element, or via the JS API.

Slide one

Slide two

Slide three

View all work

First

API reference

Attribute / property	Purpose
`index`	Active slide index (zero-based). Reflected; set to navigate.
`autoplay`	Advance slides automatically. A pause control appears.
`interval`	Autoplay delay in ms. Default `5000` (min 1000).
`loop="false"`	Clamp at the ends instead of wrapping. Default loops.
`transition="slide \| fade \| none"`	Transition style. Default `slide`.
`controls="false"`	Hide the previous / next arrows. Default shown.
`pagination="false"`	Hide the dot pagination. Default shown.
`pause-on-hover="false"`	Keep autoplay running on hover / focus. Default pauses.
`carousel.next()` · `prev()` · `go(i)`	Navigate programmatically.
`carousel.play()` · `pause()`	Start / stop autoplay.
`carousel.index` · `count` · `playing`	Current index, slide count, and autoplay state.

Slot / markup attribute	Purpose
`slot="slide"`	One element per slide. Any content.
`slot="fixed"`	Overlay content pinned across every slide. Position with `place-self`.
`data-cui-carousel-prev` · `-next`	On any element. Steps the carousel.
`data-cui-carousel-goto="<i>"`	On any element. Jumps to a slide index.

Event	Detail / behavior
`cui-carousel-change`	`{ index, previousIndex, slide }`. Fires after the active slide changes.

Part	Purpose
`viewport` · `track`	Clipping region and the moving slide track.
`fixed`	The persistent overlay layer.
`controls` · `previous` · `next`	Arrow container and the two arrow buttons.
`pagination` · `dot`	Dot container and each dot.

Variable	Default
`--cui-carousel-radius`	`--cui-radius-2`
`--cui-carousel-min-block-size`	`22rem`
`--cui-carousel-duration`	`480ms`
`--cui-carousel-easing`	`cubic-bezier(0.22, 0.61, 0.36, 1)`
`--cui-carousel-control-size`	`--cui-control-size`
`--cui-carousel-dot-active`	`--cui-color-accent`