Skip to main content

Interaction

Customize user interaction settings for the carousel, including focus, hover, and swipe behaviors.

focusOnSelect​

  • Default : true
  • Type : boolean

Determines whether clicking on a carousel item sets it as the currently active item in the carousel.

Live Editor
<Carousel focusOnSelect={true} />
Result
Loading...

pauseOnHover​

  • Default : true
  • Type : boolean

Pauses auto-play when hovering over a carousel item.

Live Editor
<Carousel pauseOnHover={true} />
Result
Loading...

pauseOnTransition​

  • Default : both
  • Type : none | size | transform | both

Determines when sliding is allowed based on the completion of transition animations.

  • 'none': No restrictions; sliding is always allowed.
  • 'size': Sliding is allowed after both width and height transitions are completed (sizeDuration).
  • 'transform': Sliding is allowed after the transform transition is completed (transformDuration).
  • 'both': Sliding is allowed only after both size and transform transitions are completed.
Live Editor
<Carousel pauseOnTransition={'both'} />
Result
Loading...

autoFocus​

  • Default : false
  • Type : boolean

Specifies whether the carousel should automatically receive focus when it loads.

Live Editor
<Carousel autoFocus={false} />
Result
Loading...

slideWithKeyboard​

  • Default : 'horizontal'
  • Type : 'none' | 'horizontal' | 'vertical' | 'both'

Allows navigation through slides using the keyboard when the carousel is focused.

  • 'none' : Disables keyboard navigation.
  • 'horizontal' : Uses Left and Right keys to navigate.
  • 'vertical' : Uses Up and Down keys to navigate.
  • 'both' : Enables navigation with Left, Right, Up, and Down keys.
Live Editor
<Carousel slideWithKeyboard='horizontal' />
Result
Loading...

swipeable​

  • Default : true
  • Type : boolean

Enables swipe gestures for navigating slides on touch devices.

Live Editor
<Carousel swipeable={true} />
Result
Loading...

swipeDirection​

  • Default : 'horizontal'
  • Type : 'horizontal' | 'vertical'

Valid only when swipeable is enabled. Specifies the swipe direction.

  • 'horizontal' : Allows left and right swipe gestures.
  • 'vertical' : Allows up and down swipe gestures.
Live Editor
<Carousel swipeable={true} swipeDirection='horizontal' />
Result
Loading...