Skip to main content

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...