Cylinder Gallery

A ring of image cards turning on itself; drag or scroll to spin it, click a card to bring it to the front.

<CylinderGallery />Live

Drag or scroll to spin · click to center

Radius

Card width

Card height

Auto-rotate speed

Your code

<CylinderGallery
  images={["/3d1.jpg","/3d2.jpg","/3d3.jpg","/3d4.jpg","/blackhole.jpg","/cowboy.jpg","/girl.jpg","/haine.jpg","/heart.jpg","/piastri.jpg","/touching.jpg","/scroll-expand-bg.jpg"]}
  radius={4.2}
  cardWidth={1.6}
  cardHeight={2.2}
  autoRotateSpeed={0.15}
/>

Next componentPerspective Grid→