Skip to content
Holocron

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.

Live Previews

Section titled “Live Previews”

Default

Section titled “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

Section titled “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

Section titled “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>

API Reference

Section titled “API Reference”
Section titled “holo-carousel Properties”

| Property | Attribute | Description | Type | Default | | ---------------- | ----------------- | -------------------------------------------------- | --------- | -------------------- | | label | label | Accessible label announced by the carousel region. | string | 'Featured content' | | autoplay | autoplay | Advances automatically on a timed interval. | boolean | false | | interval | interval | Delay between automatic slide changes in ms. | number | 5000 | | loop | loop | Whether the carousel wraps around at the ends. | boolean | true | | showIndicators | show-indicators | Render clickable indicator buttons for each slide. | boolean | true | | selectedIndex | selected-index | The index of the currently active slide. | number | 0 |

Section titled “holo-carousel Events”

| Event | Description | Type | | -------------------- | -------------------------------------- | ----------------------------------------------- | -------- | | holoCarouselChange | Emitted when the active slide changes. | CustomEvent<{ index: number; item: HTMLElement | null }> |

Section titled “holo-carousel Methods”

| Method | Description | | ------------ | ------------------------------------------------------------ | | next() | Moves to the next slide, wrapping if looping is enabled. | | previous() | Moves to the previous slide, wrapping if looping is enabled. |

Section titled “holo-carousel-item Properties”

| Property | Attribute | Description | Type | Default | | ---------- | ---------- | ----------------------------------------------------------------------- | --------- | ----------- | | label | label | Human-readable slide label used in the status region and button labels. | string | undefined | | active | active | Whether this item is the active slide. | boolean | false | | disabled | disabled | Optional disabled state. Not required for activation logic. | boolean | false |