Carousel

A carousel with motion and swipe built using Embla.

Component carousel-demo not found in registry.

Installation

Install the following dependencies:

Copy and paste the following code into your project:

Usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

<Carousel>
  <CarouselContent>
    <CarouselItem />
    <CarouselItem />
    <CarouselItem />
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Examples

Sizes

To set the size of the items, you can use the basis utility class on the <CarouselItem />.

Component carousel-size-demo not found in registry.

// 33% of the carousel width.
<Carousel>
  <CarouselContent>
    <CarouselItem class="basis-1/3">...</CarouselItem>
    <CarouselItem class="basis-1/3">...</CarouselItem>
    <CarouselItem class="basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>

// 50% on small screens and 33% on larger screens.
<Carousel>
  <CarouselContent>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>

Spacing

To set the spacing between the items, we use a pl-[VALUE] utility on the <CarouselItem /> and a negative -ml-[VALUE] on the <CarouselContent />.

Why: I tried to use the gap property or a grid layout on the <CarouselContent /> but it required a lot of math and mental effort to get the spacing right. I found pl-[VALUE] and -ml-[VALUE] utilities much easier to use.

You can always adjust this in your own project if you need to.

Orientation

Use the orientation prop to set the orientation of the carousel.

Component carousel-orientation-demo not found in registry.

<Carousel orientation="vertical | horizontal">
  <CarouselContent>
    <CarouselItem />
    <CarouselItem />
    <CarouselItem />
  </CarouselContent>
</Carousel>

Options

You can pass options to the carousel using the options prop. See the Embla Carousel docs for more information.

<Carousel
  options={() => ({
    align: "start",
    loop: true,
  })}
>
  <CarouselContent>
    <CarouselItem />
    <CarouselItem />
    <CarouselItem />
  </CarouselContent>
</Carousel>

Plugins

You can use the plugins prop to add plugins to the carousel.

import Autoplay from "embla-carousel-autoplay"
 
export function Example() {
  return (
    <Carousel
      plugins={() => [
        Autoplay({
          delay: 2000,
        }),
      ]}
    >
      // ...
    </Carousel>
  )
}

Component carousel-plugin-demo not found in registry.

Card Chart