여러 항목을 슬라이드로 넘겨보는 캐러셀입니다.
여름 정기세일
전 상품 최대 40% 할인 · 7/12 ~ 7/20
신규 회원 쿠폰
첫 구매 15,000원 즉시 할인
무료배송 이벤트
3만원 이상 구매 시 배송비 무료
const PROMOTIONS = [
{ title: "여름 정기세일", detail: "전 상품 최대 40% 할인 · 7/12 ~ 7/20" },
{ title: "신규 회원 쿠폰", detail: "첫 구매 15,000원 즉시 할인" },
]
<Carousel className="w-full max-w-sm">
<CarouselContent>
{PROMOTIONS.map((promo) => (
<CarouselItem key={promo.title}>
<div className="rounded-lg border border-border bg-card p-4">
<p className="font-medium">{promo.title}</p>
<p className="text-sm text-muted-foreground">{promo.detail}</p>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>