Carousel

npm install @kuzenbo/core

import { Carousel } from "@kuzenbo/core";

function Example() {
  return (
    <Carousel className="w-full max-w-xs">
      <Carousel.Content>
        <Carousel.Item>
          <div className="p-1">
            <Card>
              <CardContent className="flex aspect-square items-center justify-center p-6">
                <span className="text-4xl font-semibold">1</span>
              </CardContent>
            </Card>
          </div>
        </Carousel.Item>
        <Carousel.Item>
          <div className="p-1">
            <Card>
              <CardContent className="flex aspect-square items-center justify-center p-6">
                <span className="text-4xl font-semibold">2</span>
              </CardContent>
            </Card>
          </div>
        </Carousel.Item>
      </Carousel.Content>
      <Carousel.Previous />
      <Carousel.Next />
    </Carousel>
  );
}

import { useEffect, useState } from "react";
import type { CarouselApi } from "@kuzenbo/core";

function AutoplayCarousel() {
  const [api, setApi] = useState<CarouselApi>();

  useEffect(() => {
    if (!api) return;

    const interval = setInterval(() => {
      api.scrollNext();
    }, 3000);

    return () => clearInterval(interval);
  }, [api]);

  return (
    <Carousel setApi={setApi} opts={{ loop: true }}>
      {/* ... */}
    </Carousel>
  );
}

const [api, setApi] = useState<CarouselApi>();
const [current, setCurrent] = useState(0);

useEffect(() => {
  if (!api) return;

  setCurrent(api.selectedScrollSnap());
  api.on("select", () => setCurrent(api.selectedScrollSnap()));
}, [api]);

<Carousel orientation="vertical" className="h-96">
  {/* ... */}
</Carousel>