Carousel

Usage

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

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

Examples

Several per view

Set basis-* on the items. Spacing goes on the items (pl-2) with a matching negative margin on the content (-ml-2).

Guidelines

• Don't hide important content in later slides: most people never swipe past the first.
• No autoplay. If you must, pause on hover and focus, and give a pause control.
• CarouselPrevious and CarouselNext sit outside the slides; leave room for them in the layout.

API reference

Built on Embla Carousel. Pass Embla options through opts and plugins through plugins, and get the API with setApi.