Carousel

import { Carousel } from "@/ui/carousel";

export function CarouselDemo() {
  return (
    <Carousel opts={{ dragFree: false }}>
      {[...Array(5)].map((_, index) => (
        <Carousel.Item key={index}>
          <div className="flex h-64 w-[300px] min-w-[300px] items-center justify-center rounded-lg border bg-background text-muted shadow-sm font-heading">
            {index + 1}
          </div>
        </Carousel.Item>
      ))}
    </Carousel>
  );
}

import { Carousel } from "@/ui/carousel";
import AutoScroll from "embla-carousel-auto-scroll";

export function CarouselAutoScrollDemo() {
  return (
    <Carousel plugins={[AutoScroll({ playOnInit: true, speed: 0.35, direction: "forward" })]}>
      {[...Array(5)].map((_, index) => (
        <Carousel.Item key={index}>
          <div className="flex h-64 w-[300px] min-w-[300px] items-center justify-center rounded-lg border bg-background text-muted shadow-sm font-heading">
            {index + 1}
          </div>
        </Carousel.Item>
      ))}
    </Carousel>
  );
}

import { Carousel } from "@/ui/carousel";
import AutoPlay from "embla-carousel-autoplay";

export function CarouselAutoPlayDemo() {
  return (
    <Carousel plugins={[AutoPlay({ playOnInit: true })]}>
      {[...Array(5)].map((_, index) => (
        <Carousel.Item key={index}>
          <div className="flex h-64 w-[300px] min-w-[300px] items-center justify-center rounded-lg border bg-background text-muted shadow-sm font-heading">
            {index + 1}
          </div>
        </Carousel.Item>
      ))}
    </Carousel>
  );
}