Components
Carousel
A carousel with motion and swipe built using Embla.
About
The carousel component is built using the Embla Carousel library.
Usage
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@tulip-systems/core/components/client";<Carousel>
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</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 />.
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 />.
Orientation
Use the orientation prop to set the orientation of the carousel.
Options
You can pass options to the carousel using the opts prop. See the Embla Carousel docs for more
information.
<Carousel
opts={{
align: "start",
loop: true,
}}
>
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
</CarouselContent>
</Carousel>