Accessibility

Prop Name	Type	Default Value
keyboard	boolean	true
title	string	undefined

Keyboard

By default the carousel can be navigated using the keyboard. The keyboard prop can be used to disable the keyboard navigation.

Code

<Carousel showDots showArrows keyboard={false}>
  <img src="pexels-01.jpg" />
  <img src="pexels-02.jpg" />
  <img src="pexels-03.jpg" />
</Carousel>

Title

The carousel has a title prop that can be used to provide a title for the carousel. The value of the title will be rendered as a hidden h3 tag for the carousel targeted with the aria-labeledby attribute. This will help screen readers to announce the title of the carousel when it is focused.

Carousel

Code

<Carousel showDots showArrows title="Carousel">
  <img src="pexels-01.jpg" />
  <img src="pexels-02.jpg" />
  <img src="pexels-03.jpg" />
</Carousel>