KikitaUiDocs

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

<kui-carousel [(index)]="slide">
  <div kuiCarouselSlide>Slide 1</div>
  <div kuiCarouselSlide>Slide 2</div>
  <div kuiCarouselSlide>Slide 3</div>
  <div kuiCarouselSlide>Slide 4</div>
  <div kuiCarouselSlide>Slide 5</div>
</kui-carousel>

No events yet.

Name	Type	Default	Description
itemsPerView	`number \| undefined`	`undefined`	How many slides are visible at once (defaults.carousel.itemsPerView, then 1). Invalid or non-positive static values use 1. The highest reachable index is slideCount - itemsPerView, and the dot picker renders exactly that many dots.
loop	`boolean \| undefined`	`undefined`	Wraps navigation at the edges instead of disabling Prev and Next there. Falls back to defaults.carousel.loop, then false.
autoplay	`boolean \| undefined`	`undefined`	Advances automatically on a timer and always shows Play/Pause; pauses while the pointer, focus or a touch is inside. Falls back to defaults.carousel.autoplay, then false.
autoplayInterval	`number \| undefined`	`undefined`	Autoplay delay between slides in ms (defaults.carousel.autoplayInterval, then 4000). Invalid or non-positive static values use 4000.
showArrows	`boolean \| undefined`	`undefined`	Shows the Prev and Next arrows (defaults.carousel.showArrows, then true). Swipe and scroll work regardless.
showDots	`boolean \| undefined`	`undefined`	Shows the dot picker below the track (defaults.carousel.showDots, then true). Swipe and scroll work regardless.
draggable	`boolean \| undefined`	`undefined`	Adds mouse drag-to-scroll on top of the always-native touch swipe (defaults.carousel.draggable, then true). false also locks wheel and trackpad scroll and removes the track from the tab order.
ariaLabel	`string \| undefined`	`undefined`	Accessible name of the region. Falls back to the carousel.label message (Slides); use a content-specific name that does not contain "carousel".
messages	`Partial<KuiCarouselMessages> \| undefined`	`undefined`	Per-instance text overrides for the label, role descriptions, controls and slide names. They win over scoped and root messages.
[(index)]	`number`	`0`	Index of the first visible slide. A debounced scroll listener snaps it to the nearest slide after a swipe or drag.
(indexChange)	`number`	`-`	Emitted whenever index changes (model output).
[kuiCarouselSlide]	`content slot`	`-`	Marks projected slide content: role="group" with aria-roledescription="slide" and an "N of total" name. It has no inputs.
--kui-carousel-gap / -radius / -slide-radius	`CSS custom properties`	`-`	Gap between slides and the region and slide corner radii.
--kui-carousel-bg / -border / -slide-bg	`CSS custom properties`	`-`	Region background and border and the slide backdrop.
--kui-carousel-control-bg / -control-shadow	`CSS custom properties`	`-`	Backdrop circle and shadow of the Prev, Next and Play controls.
--kui-carousel-dot-bg / -dot-bg-active / -dot-size	`CSS custom properties`	`-`	Colour of the dots, the active dot and the dot size.
KuiCarouselOptions	`interface`	`-`	Shape of defaults.carousel: itemsPerView, loop, autoplay, autoplayInterval, showArrows, showDots, draggable, previousIcon and nextIcon.

Inputs verified against @kikita-labs/ui v2.0.0 public typings.

Carousel — Playground