Carousel | Zalify UI

React

Usage

import { Carousel } from '@zalify-ui/react'

<Carousel.Root>
  <Carousel.ItemGroup>
    <Carousel.Item  />
  </Carousel.ItemGroup>
  <Carousel.Control>
    <Carousel.PrevTrigger/>
    <Carousel.IndicatorGroup>
      <Carousel.Indicator />
    </Carousel.IndicatorGroup>
    <Carousel.NextTrigger />
  </Carousel.Control>
</Carousel.Root>

Shortcuts

IndicatorGroup

The Carousel.IndicatorGroup automatically renders indicators for each page. Instead of:

<Carousel.IndicatorGroup>
  <Carousel.Indicator index={0} />
  <Carousel.Indicator index={1} />
  {/* ... */}
</Carousel.IndicatorGroup>

If you don't need to customize the indicators, you can use the shortcut:

<Carousel.IndicatorGroup />

Examples

Multiple

Set the slidesPerPage prop to show multiple items per page.

React

Auto Play

Set the autoPlay prop to enable automatic sliding.

React

Images

Here is an example of a carousel displaying images.

React

Vertical

Set the orientation prop to vertical to create a vertical carousel.

React

Scroll To

Use the scrollTo method to programmatically navigate to a specific slide.

React

Props

Root

Prop	Default	Type
`slideCount`*		`number` The total number of slides. Useful for SSR to render the initial ating the snap points.
`size`	`'md'`	`'md'`
`allowMouseDrag`	`false`	`boolean` Whether to allow scrolling via dragging with mouse
`autoplay`	`false`	`boolean \| { delay: number }` Whether to scroll automatically. The default delay is 4000ms.
`defaultPage`	`0`	`number` The initial page to scroll to when rendered. Use when you don't need to control the page of the carousel.
`inViewThreshold`	`0.6`	`number \| number[]` The threshold for determining if an item is in view.
`loop`	`false`	`boolean` Whether the carousel should loop around.
`orientation`	`\horizontal\`	`'horizontal' \| 'vertical'` The orientation of the element.
`slidesPerMove`	`\auto\`	`number \| 'auto'` The number of slides to scroll at a time. When set to `auto`, the number of slides to scroll is determined by the `slidesPerPage` property.
`slidesPerPage`	`1`	`number` The number of slides to show at a time.
`snapType`	`\mandatory\`	`'proximity' \| 'mandatory'` The snap type of the item.
`spacing`	`\0px\`	`string` The amount of space between items.
`inline`		`boolean`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`ids`		`Partial<{ root: string item: (index: number) => string itemGroup: string nextTrigger: string prevTrigger: string indicatorGroup: string indicator: (index: number) => string }>` The ids of the elements in the carousel. Useful for composition.
`onAutoplayStatusChange`		`(details: AutoplayStatusDetails) => void` Function called when the autoplay status changes.
`onDragStatusChange`		`(details: DragStatusDetails) => void` Function called when the drag status changes.
`onPageChange`		`(details: PageChangeDetails) => void` Function called when the page changes.
`padding`		`string` Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view.
`page`		`number` The controlled page of the carousel.
`translations`		`IntlTranslations` The localized messages to use.

Indicator

Prop	Default	Type
`index`*		`number` The index of the indicator.
`readOnly`	`false`	`boolean` Whether the indicator is read only.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`index`*		`number` The index of the item.
`snapAlign`	`\start\`	`'center' \| 'start' \| 'end'` The snap alignment of the item.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.