Carousel

import {
  Carousel, CarouselContent, CarouselItem,
  CarouselPrevious, CarouselNext,
} from "@vortex/ui-foundation"
 
<Carousel className="w-full max-w-[672px]">
  <CarouselContent>
    {[1, 2, 3, 4, 5].map((item) => (
      <CarouselItem key={item}>
        <div className="flex aspect-[16/9] items-center justify-center p-6 border rounded-lg">
          <span className="text-4xl font-semibold">{item}</span>
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

<Carousel className="w-full max-w-[768px]">
  <CarouselContent>
    {[1, 2, 3, 4, 5, 6].map((item) => (
      <CarouselItem key={item} className="basis-1/3">
        <Card>
          <CardContent className="flex aspect-square items-center justify-center p-6">
            <span className="text-2xl font-semibold">{item}</span>
          </CardContent>
        </Card>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

import { useState, useEffect } from "react"
import { type CarouselApi } from "@vortex/ui-foundation"
 
function CarouselWithIndicator() {
  const [api, setApi] = useState<CarouselApi>()
  const [current, setCurrent] = useState(0)
  const [count, setCount] = useState(0)
 
  useEffect(() => {
    if (!api) return
    setCount(api.scrollSnapList().length)
    setCurrent(api.selectedScrollSnap())
    api.on("select", () => setCurrent(api.selectedScrollSnap()))
  }, [api])
 
  return (
    <>
      <Carousel setApi={setApi}>
        <CarouselContent>...</CarouselContent>
      </Carousel>
      <div className="flex justify-center gap-2">
        {Array.from({ length: count }).map((_, i) => (
          <button
            key={i}
            className={`size-2.5 rounded-full ${
              i === current ? "bg-primary" : "bg-muted-foreground/30"
            }`}
            onClick={() => api?.scrollTo(i)}
          />
        ))}
      </div>
    </>
  )
}

import Autoplay from "embla-carousel-autoplay"
import { useMemo } from "react"
 
function AutoplayCarousel() {
  const plugin = useMemo(
    () => Autoplay({ delay: 2000, stopOnInteraction: true }),
    [],
  )
 
  return (
    <Carousel
      plugins={[plugin]}
      onMouseEnter={plugin.stop}
      onMouseLeave={plugin.reset}
    >
      <CarouselContent>...</CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

const plugin = useMemo(
  () => Autoplay({ delay: 2000, stopOnInteraction: false }),
  [],
)
const [isPlaying, setIsPlaying] = useState(true)
 
const toggle = () => {
  isPlaying ? plugin.stop() : plugin.play()
  setIsPlaying(!isPlaying)
}
 
<Carousel plugins={[plugin]}>...</Carousel>
<Button onClick={toggle}>{isPlaying ? "일시정지" : "재생"}</Button>

<Carousel opts={{ loop: true }}>
  <CarouselContent>...</CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

<Carousel opts={{ startIndex: 2 }}>
  <CarouselContent>...</CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>