title: "Carousel" slug: "/packages/carousel" category: "layout" componentNames:

• "Carousel"
• "CarouselItem"

Carousel

The Carousel component can be used to display a set of items in a horizontally scrolling container. This is particularly useful for longer tabs, or similar content that should not take up too much vertical space on mobile.

The carousel is used under the hood in the TabBar component, so you can also see it in action in input patterns.

import { Carousel, CarouselItem } from "@ds-kit/carousel"

Basic Example

For this simple example we will render a carousel with items of the same width.

<Carousel variant="full">
  <CarouselItem>
    <Div width="100%" bg="#EEE" p="1rem">
      Item 1
    </Div>
  </CarouselItem>
  <CarouselItem>
    <Div width="100%" bg="#EEE" p="1rem">
      Item 2
    </Div>
  </CarouselItem>
  <CarouselItem>
    <Div width="100%" bg="#EEE" p="1rem">
      Item 3
    </Div>
  </CarouselItem>
  <CarouselItem>
    <Div width="100%" bg="#EEE" p="1rem">
      Item 4
    </Div>
  </CarouselItem>
</Carousel>

Variable widths

A carousel with variable width items.

<Carousel variant="full">
  <CarouselItem width="auto">
    <Div bg="#EEE" p="1rem">
      Variable widths
    </Div>
  </CarouselItem>
  <CarouselItem width="auto">
    <Div bg="#EEE" p="1rem">
      Small
    </Div>
  </CarouselItem>
  <CarouselItem width="auto">
    <Div bg="#EEE" p="1rem">
      Longer components are possible too
    </Div>
  </CarouselItem>
  <CarouselItem width="auto">
    <Div bg="#EEE" p="1rem">
      This will only scroll when it's longer than the container
    </Div>
  </CarouselItem>
</Carousel>