@kit-ng-ui/carousel

Slide gallery with autoplay, dot indicators and prev/next arrows. Mirrors ant-design's <Carousel>.

Install

pnpm add @kit-ng-ui/carousel

@use '@kit-ng-ui/carousel/styles';

Example

<kit-carousel [autoplay]="true" [arrows]="true">
  <kit-carousel-item><img src="a.jpg" alt="" /></kit-carousel-item>
  <kit-carousel-item><img src="b.jpg" alt="" /></kit-carousel-item>
  <kit-carousel-item><img src="c.jpg" alt="" /></kit-carousel-item>
</kit-carousel>

API

<kit-carousel>

| Input | Type | Default | Description | | ---------------- | -------------------------- | ----------- | ------------------------------------------ | | current | number (model) | 0 | Active slide index (two-way bindable). | | effect | 'scrollx' \| 'fade' | 'scrollx' | Transition style. | | autoplay | boolean | false | Cycle through slides automatically. | | autoplaySpeed | number (ms) | 3000 | Autoplay interval. | | pauseOnHover | boolean | true | Pause autoplay while the carousel is hovered. | | dots | boolean | true | Show indicator dots. | | dotPosition | 'top' \| 'bottom' \| 'left' \| 'right' | 'bottom' | Where to render dots. | | arrows | boolean | false | Show prev/next chevrons. | | infinite | boolean | true | Wrap from last to first slide. |

| Output | Payload | Description | | -------------- | -------------------------------- | ----------------------------------------------------------------- | | beforeChange | { from: number; to: number } | Fires before a slide change. | | afterChange | number | Fires after the slide transition completes (synchronously for fade). |

<kit-carousel-item>

Projects any content as a single slide. No inputs.