Circle Gallery

Draggable circular carousel with inertia and 3D transforms

circle-gallery-tw

001

002

003

004

005

006

007

008

009

010

011

012

Customize

Circle Radius %

15%

Item Width

200px

Item Height

250px

Item Scale

0.85

Border Radius

16px

Throw Resistance

0.35

Animation Duration

0.9s

Auto Spin (deg/s)

5°/s

Enable DragShow Numbers

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

imagesstring[]

Array of image URLs to display in the circular gallery

Default[]

radiusPercentnumber

Radius of the circle as a percentage of viewport (10-50)

Default38

itemWidthnumber

Width of each gallery item in pixels

Default280

itemHeightnumber

Height of each gallery item in pixels

Default400

itemScalenumber

Scale factor for items (0.5-1.5)

Default0.85

borderRadiusnumber

Border radius for items in pixels

Default8

enableDragboolean

Enable drag rotation of the gallery

Defaulttrue

throwResistancenumber

Throw resistance for inertia (0-1, lower = more momentum)

Default0.35

animationDurationnumber

Duration for initial animation in seconds

Default0.9

showNumbersboolean

Show item numbers on cards

Defaulttrue

autoSpinnumber

Auto-spin speed in degrees per second (0 = disabled)

Default0

classNamestring

Additional CSS classes for the wrapper container

Default""

itemClassNamestring

Additional CSS classes for each gallery item

Default""

onItemClick(index: number, image: string) => void

Callback function when an item is clicked

Defaultundefined