Callbacks

These are callback functions that respond to specific carousel events.

onChange

• Default : undefined
• Type : (curIndex: number, item: JSX.Element) => void

A callback function triggered when the carousel’s current index changes.

• curIndex : The index of the current item
• item : The current item

Live Editor

<Carousel onChange={(currentIndex) => console.log(currentIndex)} /> 

Result

Loading...

onClickItem

• Default : undefined
• Type : (e: React.MouseEvent, index: number, item: JSX.Element, isCurIndex: boolean) => void

Called when a carousel item is clicked.

• e : The click event
• index : The index of the clicked item
• item : The clicked item
• isCurtIndex : Indicates whether the clicked item is the currently active item

Live Editor

<Carousel onClickItem={
  (_, index, _item, _isCurIndex) => alert(`${index} is clicked`)} /> 

Result

Loading...

onSwipeStart

• Default : undefined
• Type : (e: React.TouchEvent) => void | undefined

Triggered when a touch swipe gesture starts.

Live Editor

<Carousel onSwipeStart={(e) => console.log('Swipe Start')} /> 

Result

Loading...

onSwipeMove

• Default : undefined
• Type : (e: React.TouchEvent) => void | undefined

Called continuously during a touch swipe.

Live Editor

<Carousel onSwipeMove={(e) => console.log('Swiping')} /> 

Result

Loading...

onSwipeEnd

• Default : undefined
• Type : (e: React.TouchEvent) => void | undefined

Called when a touch swipe gesture ends.

Live Editor

<Carousel onSwipeEnd={(e) => console.log('Swipe End')} /> 

Result

Loading...