Carousel

A component for displaying a series of items in a sliding format.

import { Carousel } from '@cerberus/react'

Usage

import { Button, Carousel, For } from '@cerberus/react'
import { Center } from 'styled-system/jsx'
import items from './items.json'

function BasicDemo() {
  return (
    <Carousel.Root
      defaultPage={0}
      padding="1rem"
      slideCount={items.length}
      slidesPerPage={2.5}
      spacing="1rem"
    >
      <Carousel.ItemGroup>
        <For each={items}>
          {(item, idx) => (
            <Carousel.Item key={item.id} index={idx} asChild>
              <Center
                bgColor="page.bg.100"
                border="1px solid"
                borderColor="page.border.200"
                color="page.text.100"
                h="21rem"
                rounded="md"
                transitionProperty="all"
                transitionDuration="normal"
                transitionTimingFunction="cubic-bezier(0.075, 0.82, 0.165, 1)"
                willChange="z-index, transform, box-shadow"
                _hover={{
                  shadow: 'lg',
                  transform: 'scale(1.2)',
                  zIndex: 'decorator',
                }}
              >
                {item.content}
              </Center>
            </Carousel.Item>
          )}
        </For>
      </Carousel.ItemGroup>

      <Carousel.Control>
        <Carousel.PrevTrigger asChild>
          <Button shape="rounded" size="sm" usage="outlined">
            Prev
          </Button>
        </Carousel.PrevTrigger>
        <Carousel.NextTrigger asChild>
          <Button shape="rounded" size="sm" usage="outlined">
            Next
          </Button>
        </Carousel.NextTrigger>
      </Carousel.Control>
    </Carousel.Root>
  )
}

With Indicators

Use the showIndicators prop to display indicators for each slide.

import { Button, Carousel, For } from '@cerberus/react'
import { Center } from 'styled-system/jsx'
import items from './items.json'

function WithIndicatorsDemo() {
  return (
    <Carousel.Root
      defaultPage={0}
      padding="1rem"
      slideCount={items.length}
      slidesPerPage={1}
      spacing="1rem"
      showIndicators
    >
      <Carousel.ItemGroup>
        <For each={items}>
          {(item, idx) => (
            <Carousel.Item key={item.id} index={idx} asChild>
              <Center
                bgColor="page.bg.100"
                border="1px solid"
                borderColor="page.border.200"
                color="page.text.100"
                h="16rem"
                rounded="md"
                transitionProperty="all"
                transitionDuration="normal"
                transitionTimingFunction="cubic-bezier(0.075, 0.82, 0.165, 1)"
                willChange="z-index, transform, box-shadow"
              >
                {item.content}
              </Center>
            </Carousel.Item>
          )}
        </For>
      </Carousel.ItemGroup>
    </Carousel.Root>
  )
}

Primitives

You can utilize the primitive components or the css prop to customize the button.

Component	Description
CarouselRoot	The context provider for the Carousel parts
CarouselControl	The container of the Next and Prev triggers
CarouselPrevTrigger	The button to navigate to the previous slide
CarouselNextTrigger	The button to navigate to the next slide
CarouselItemGroup	The container for the Carousel items
CarouselItem	The individual item within the Carousel
CarouselIndicatorGroup	The container for the indicators
CarouselIndicator	The individual indicator representing each slide

API

Props

The Carousel component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
showIndicators	`false`	Whether to show indicators for each slide.

The Carousel also accepts all the props of the Root component.

Parts

The CarouselParts API is an Object containing the full family of components.

Name	Description
Root	The `Carousel` component which is the Provider for the family.
Control	The container of the Next and Prev triggers.
PrevTrigger	The button to navigate to the previous slide.
NextTrigger	The button to navigate to the next slide.
ItemGroup	The container for the Carousel items.
Item	The `CarouselItem` component which represents an individual item within the carousel.
IndicatorGroup	The container for the indicators.
Indicator	The individual indicator representing each slide.

On this page

Edit this page on Github