Components / Carousel

Carousel

Projected slides with buttons, arrow keys, swipe and optional looping.

Own your code

1 / 2

example.component.html

html

<aevko-carousel label="Projects">
  <aevko-carousel-slide label="Slide 1 of 2">
    ...
  </aevko-carousel-slide>
</aevko-carousel>

Installation

npx aevko-ui@latest add carousel --yes

Source ownership

Style the viewport, slides and controls locally, then replace either control icon through its projection slot without adding an icon dependency.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

Property or slot	Type	Default	Description
`label`	`string`	`required`	Accessible name for the carousel region.
`index`	`model<number>`	`0`	Zero-based active slide index; supports two-way binding.
`loop`	`boolean`	`false`	Moves from the last slide to the first and vice versa.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Axis used by navigation and swipe gestures.
`AevkoCarouselSlide.label`	`string`	`optional`	Accessible name announced for an individual slide.
`aevkoCarouselPreviousIcon`	`projected slot`	`inline SVG`	Replaces the previous-control fallback icon.
`aevkoCarouselNextIcon`	`projected slot`	`inline SVG`	Replaces the next-control fallback icon.

Accessibility contract

The region and slides expose carousel semantics, status is announced and every control has an accessible name.

Provide a concise region label and meaningful slide labels; do not auto-advance content without user controls.