Holo Carousel & Carousel Item

<holo-carousel> manages a set of <holo-carousel-item> children and exposes a simple slide selection API, keyboard navigation, and autoplay behavior. Each item is announced by its label and can be controlled via the parent carousel’s selectedIndex property.

When to use

Use it for:

Showing a small set of related slides, one at a time, where the user chooses when to move on.
Featured content where space is limited.

Don’t use it for:

Critical information or calls to action. Hidden slides are easy to miss; show them directly.
Comparing items side by side. Use Grid.
Switching between named views. Use Tabs.
Auto-advancing content users must read. Leave autoplay off.

Live Previews

Default

DiscoveryExplore a wide range of tools and resources that help teams move faster.

BuildCreate polished experiences with thoughtful interaction patterns and tokens.

LaunchShip with confidence and keep the experience coherent across every touchpoint.

<holo-carousel label="Featured content">
  <holo-carousel-item label="Discovery" active>
    <div>Discover a better way to work.</div>
  </holo-carousel-item>
  <holo-carousel-item label="Build">
    <div>Build polished experiences in a shared design system.</div>
  </holo-carousel-item>
</holo-carousel>

Autoplay

PlanDefine your objectives and align stakeholders before you build.

PrototypeValidate flows, interactions, and user confidence with lightweight prototypes.

ShipDeliver clearly and maintain momentum after launch.

<holo-carousel label="Feature highlights" autoplay interval="3200">
  <holo-carousel-item label="Plan" active>Plan content</holo-carousel-item>
  <holo-carousel-item label="Prototype">Prototype content</holo-carousel-item>
  <holo-carousel-item label="Ship">Ship content</holo-carousel-item>
</holo-carousel>

No indicators

Design systemsBuild consistent product patterns that scale across teams.

ComponentsCompose reusable pieces for a clear, efficient user journey.

<holo-carousel label="Suggested reading" show-indicators="false">
  <holo-carousel-item label="Design systems" active>Design systems</holo-carousel-item>
  <holo-carousel-item label="Components">Components</holo-carousel-item>
</holo-carousel>

Accessibility

The carousel renders a role="region" named by the label prop (default “Featured content”). Each <holo-carousel-item> renders a role="group" named by its label, or “Slide N” when none is given. Slides that are not current get aria-hidden="true" and the inert attribute, so their content is not reachable by keyboard or screen reader. A role="status" live region (aria-live="polite") announces the current slide name when it changes.

Previous and next controls are native buttons named “Previous slide” and “Next slide”. With show-indicators and two or more slides, one native button per slide is added, named by the slide label (or “Slide N”), with aria-current on the active one.

Key	Action
`Tab`	Moves between the controls and indicators
`Enter`, `Space`	Activates the focused control
`ArrowRight`	Next slide
`ArrowLeft`	Previous slide
`Home`	First slide
`End`	Last slide

Arrow, Home and End keys work while focus is anywhere inside the carousel, because the key listener is on the host.
With loop off, the previous and next buttons are disabled at the ends.
Autoplay (off by default) pauses while the pointer is over the carousel or focus is inside it. There is no pause or stop button.
The slide transition only runs when prefers-reduced-motion: no-preference.

You provide:

A specific label for the carousel and for each slide, especially if a page has more than one carousel.
Accessible names for any links or buttons you place inside slides.
A way to pause if you enable autoplay, because moving content that starts automatically must be pausable under WCAG 2.2.2. Prefer leaving it off.

API Reference

`holo-carousel`

Importing

import '@philbob-sideprojects/hololink-ui/holo-carousel';

Properties

Property	Attribute	Type	Default	Description
`autoplay`	`autoplay`	`boolean`	`false`	If true, the slideshow advances automatically.
`interval`	`interval`	`number`	`5000`	Delay between autoplay advances in milliseconds.
`label`	`label`	`string`	`'Featured content'`	The accessible label for the carousel region.
`loop`	`loop`	`boolean`	`true`	If true, the carousel wraps from last to first and first to last.
`selectedIndex`	`selected-index`	`number`	`0`	The zero-based index of the currently active slide. Updated as the user navigates.
`showIndicators`	`show-indicators`	`boolean`	`true`	If true, render slide indicator buttons.

Events

Event	Detail	Description
`holoCarouselChange`	`{ index: number; item: HTMLElement; }`	Emitted whenever the visible slide changes after the initial render. `detail` is `{ index: number; item: HTMLElement \| null }`, the new index and its `holo-carousel-item`.

Methods

Signature	Description
`next() => Promise<void>`	Moves to the next slide. Wraps to the first slide when `loop` is true; otherwise stays on the last slide.
`previous() => Promise<void>`	Moves to the previous slide. Wraps to the last slide when `loop` is true; otherwise stays on the first slide.

Slots

Slot	Description
(default)	The `holo-carousel-item` slides.

CSS custom properties

Property	Description
`--holo-carousel-bg`	Background color of the carousel frame.
`--holo-carousel-border`	Border color of the frame and the previous/next buttons.
`--holo-carousel-button-bg`	Background color of the previous/next buttons.
`--holo-carousel-button-hover`	Background color of the previous/next buttons on hover.
`--holo-carousel-button-text`	Icon color of the previous/next buttons.
`--holo-carousel-indicator-active`	Color of the active slide indicator.
`--holo-carousel-indicator-bg`	Color of inactive slide indicators.
`--holo-carousel-item-radius`	Corner radius of the frame and slide viewport.
`--holo-carousel-shadow`	Box shadow of the carousel frame.
`--holo-carousel-text`	Text color of the carousel.

`holo-carousel-item`

Importing

import '@philbob-sideprojects/hololink-ui/holo-carousel-item';

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether this slide is currently active. Managed by the parent `holo-carousel`.
`disabled`	`disabled`	`boolean`	`false`	Reflected as an attribute for styling only; the carousel does not skip disabled slides.
`label`	`label`	`string`	—	Accessible name for this slide, used in the carousel's status announcement and indicator buttons. Defaults to "Slide N".

Slots

Slot	Description
(default)	The slide content.

CSS custom properties

Property	Description
`--holo-carousel-item-bg`	Background color of the slide.
`--holo-carousel-item-border`	Border color of the slide.
`--holo-carousel-item-radius`	Corner radius of the slide.
`--holo-carousel-item-shadow`	Box shadow of the slide.