carousel/introduction

Quick Demo

This component follows this anatomy:

    <Carousel>
      <CarouselPrevious />
      <CarouselContent>
        <CarouselItem />
        {/* more <CarouselItem /> */}
      </CarouselContent>
      <CarouselNext />
    </Carousel>
  

1️⃣ CarouselContent vs. CarouselItem

Slides (aka CarouselItem) are managed horizontally by CarouselContent using Flexbox. Think of CarouselContent as a Flexbox container and CarouselItem as a Flexbox item.

That's why in the Quick Demo, we use flex-basis to control each CarouselItem's width.

2️⃣ Carousel

We use Embla under the hood. You can pass config options and plugins to Embla using the opts and plugins props:

Need more control? Access Embla's instance directly with the setApi prop to use their full API:

Q&A