Aspyn

Carousel

Swipeable slides built on Embla.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from "@aspyn-io/kit";

Basic

Embla-powered: drag, swipe, keyboard arrows, and snap alignment.

1
2
3
4
5
<Carousel className="w-full max-w-xs">
  <CarouselContent>
    {items.map((item) => (
      <CarouselItem key={item}>…slide…</CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Multiple slides per view

1
2
3
4
5
6
<Carousel opts={{ align: "start" }}>
  <CarouselContent>
    {items.map((item) => (
      <CarouselItem key={item} className="basis-1/3">…</CarouselItem>
    ))}
  </CarouselContent>
</Carousel>

Notes

  • Autoplay, loop, and other behaviors via embla plugins/opts props.
  • Get the API with setApi for custom pagination dots or slide counters.