Content Display

Card Carousel

드래그와 자동 재생을 지원하는 3D 카드 캐러셀입니다.

Preview

content media

Card Carousel

autoplay through cards

Common UI

Common UI components are coming soon!

Text Animations

Cool text animations for your projects.

Animations

Smooth animations for your projects.

Components

Reusable components for your projects.

Backgrounds

Beautiful backgrounds and patterns for your projects.

Common UI

Common UI components are coming soon!

Text Animations

Cool text animations for your projects.

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/carousel.json

Code

typescript
Copied
1import { Carousel } from "@/components/carousel"23export default function Example() {4  return <Carousel autoplay loop pauseOnHover />5}

Props

items

Type
CarouselItem[]
Default
built-in items
Description
Carousel cards.

baseWidth

Type
number
Default
300
Description
Carousel width.

autoplay

Type
boolean
Default
false
Description
Whether to advance automatically.

autoplayDelay

Type
number
Default
3000
Description
Delay between autoplay steps.

pauseOnHover

Type
boolean
Default
false
Description
Whether hovering pauses autoplay.

loop

Type
boolean
Default
false
Description
Whether the carousel wraps.

round

Type
boolean
Default
false
Description
Whether to render the round style.

Reference

ReactBits Card Carousel