Circle Gallery
circle-gallery-tw
001
002
003
004
005
006
007
008
009
010
011
012
Customize
15%
200px
250px
0.85
16px
0.35
0.9s
5°/s
Props
| Name | Type | Default | Description |
|---|---|---|---|
| images | string[] | [] | Array of image URLs to display in the circular gallery |
| radiusPercent | number | 38 | Radius of the circle as a percentage of viewport (10-50) |
| itemWidth | number | 280 | Width of each gallery item in pixels |
| itemHeight | number | 400 | Height of each gallery item in pixels |
| itemScale | number | 0.85 | Scale factor for items (0.5-1.5) |
| borderRadius | number | 8 | Border radius for items in pixels |
| enableDrag | boolean | true | Enable drag rotation of the gallery |
| throwResistance | number | 0.35 | Throw resistance for inertia (0-1, lower = more momentum) |
| animationDuration | number | 0.9 | Duration for initial animation in seconds |
| showNumbers | boolean | true | Show item numbers on cards |
| autoSpin | number | 0 | Auto-spin speed in degrees per second (0 = disabled) |
| className | string | "" | Additional CSS classes for the wrapper container |
| itemClassName | string | "" | Additional CSS classes for each gallery item |
| onItemClick | (index: number, image: string) => void | undefined | Callback function when an item is clicked |