Skip to content

KCarousel

A carousel component

Install

bash
pnpm add @ikun-ui/carousel
bash
yarn add @ikun-ui/carousel
bash
npm install @ikun-ui/carousel

Basic usage

Basic usage.

Indicator

Indicators can be displayed inside the carousel

Arrows

The arrow property determines when arrows are displayed.

Auto height

When the height property is not set, the carousel component dynamically changes height according to the content.

Custom indicator and arrow

Sometimes you may want to customize indicator and arrow.

NameTypeDefaultDescription
heightnumber'-Height of the carousel.
initialIndexnumber0The default display index of carousel (starting from 0).
countnumber0Specifies the number of carousels to display, it is required.
arrow'always' | 'hover' | 'never'hoverHow the arrow paginator is displayed.
loopbooleantrueWhether to loop play.
autoplaybooleantrueWhether to play through automatic page turning.
pauseOnHoverbooleantrueWhen the mouse moves over the carousel, the automatic page turning playback will be paused..
intervalnumber3000Automatic page turning playback interval (unit ms).
clsstring''Additional class for component
attrsRecord<string, string>{}Additional attributes
NameDescriptionType
changeTriggered when a page turn occurs.(data: { index: number, oldIndex:number })=> void
NameDescription
defaultCustomize default content
indicatorsCustomize indicators content, Use with KIndicators to implement custom indicators
arrowCustomize arrow content, Use with KCarouselArrow to implement a customized arrow

MIT Licensed