Data display

Carousel

Themed rotating content region with prev/next controls, indicators, autoplay, and accessible announcements.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjCarouselComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

The Alps

The Andes

The Atlas

active

slides

orientation

loop

indicators

<kj-carousel
  label="Featured destinations"
  value="alps"
  orientation="horizontal"
>
  <kj-carousel-previous aria-label="Previous slide" />
  <kj-carousel-viewport>
    <kj-carousel-slide value="alps" label="The Alps">
      <div class="slide">The Alps</div>
    </kj-carousel-slide>
    <kj-carousel-slide value="andes" label="The Andes">
      <div class="slide">The Andes</div>
    </kj-carousel-slide>
    <kj-carousel-slide value="atlas" label="The Atlas">
      <div class="slide">The Atlas</div>
    </kj-carousel-slide>
  </kj-carousel-viewport>
  <kj-carousel-next aria-label="Next slide" />
  <kj-carousel-indicators />
</kj-carousel>