Carousel pagination

Ready to use


import {CarouselPagination} from '@primer/react-brand'

Examples

Use loop to let the previous and next controls wrap between the first and last items.

Provide translated labels for both arrow controls and the numbered item selectors.

Name	Type	Default	Description
`itemCount`	`number`		Total number of carousel items. Controls are hidden when fewer than two.
`activeIndex`	`number`		Zero-based active item index.
`onChange`	`(activeIndex: number) => void`		Requests a new active index. The parent remains responsible for selection.
`loop`	`boolean`	`false`	Wraps previous and next navigation at the collection boundaries.
`labels`	`CarouselPaginationLabels`	English	Accessible labels for arrow controls and the numbered selectors.
`itemAttributesBuilder`	`(index: number) => CarouselPaginationItemAttributes`		Adds attributes or a composed click handler to an item selector.
`aria-label`	`string`		Required accessible name for the complete control group.
`className`	`string`		Custom root class.
`id`	`string`		Custom root ID.
`ref`	`React.Ref<HTMLDivElement>`		Ref to the root element.