The 3D Carousel Generator builds GSAP-powered 3D carousels in 6 types (merry-go-round, vertical wheel, card stack, flower, cube and ferris wheel) for free. Pick a type, tune the cards, radius, perspective, tilt, speed and color with sliders, and copy drag-and-swipe HTML/CSS/JS (full, GSAP CDN included).
How to use it (3 steps)
- Pick a type: click the closest of the 6 templates (the preview switches instantly)
- Adjust: tune cards, radius, perspective, tilt, speed and color with sliders. Drag the preview to spin it
- Copy & swap images: copy the generated code (full version) and replace each card's content with your own image
The 6 types at a glance
| Type | Motion | Best for |
|---|---|---|
| Merry-go-round | Cards form a horizontal ring and spin (front/back and side tilt adjustable) | Photo / product galleries |
| Vertical wheel | A vertical ring that rotates like a wheel | Tall cards, features |
| Card stack | The next card rises from below while the current one recedes (auto-play + swipe) | Story-like sequential slides |
| Flower | Cards arranged radially, spun at a look-down angle (flower / kaleidoscope) | Visual / decorative heroes |
| Cube | A 6-faced cube (4 sides + top + bottom) rotates | Galleries, switching displays |
| Ferris wheel | Cards orbit a circle but always stay upright and face front (gondolas) | Thumbnail lists, browsing |
Settings reference
The sliders shown depend on the type. The main settings are:
| Setting | What it does |
|---|---|
| count | Number of cards |
| radius | Ring radius (larger = cards spread out) |
| size | Cube edge length (cube) |
| perspective | Strength of perspective (smaller = more depth) |
| cardW / cardH | Card width / height (px) |
| tilt X / tilt Z | Merry-go-round tilt (X = pitch toward you, Z = bank left/right) |
| look down | Look-down angle from above (flower, cube, ferris wheel) |
| interval | Auto-play interval in seconds (card stack) |
| depth | How far the leaving card recedes (card stack) |
| speed | Seconds per full turn (smaller = faster). Static when auto is off |
| hue | Card color hue (0–360°) |
Swapping cards for images
- Ring types (merry-go-round, vertical wheel, flower, cube, ferris wheel): replace
<span>1</span>inside each.c3-cardwith<img src="photo1.jpg" alt=""> - Card stack: replace each
.cs-imgwith your image and edit the.cs-textheading and caption - Images use
object-fit: cover, so they fill the card. To change the count, adjustcountand provide that many cards
Controls & code
- Drag / swipe: the rotating types keep spinning with inertia after you release; the card stack moves forward/back with a swipe or tap
- Auto-rotate / auto-play: toggle on/off. Off means static + manual control (reflected in the code)
- Full code only: a self-contained snippet that loads GSAP, Draggable (and InertiaPlugin for the rotating types). Just paste it in
FAQ
What kinds of 3D carousels can I build?
Six types: merry-go-round (horizontal ring), vertical wheel, card stack (the next card rises and the current one recedes), flower (radial layout viewed from above), cube (a 6-faced rotating cube) and ferris wheel (cards orbit but always face front). All support auto-rotation and drag.
Does the generated code work as-is?
Yes. The generated code is a self-contained snippet (full version) that includes loading GSAP, Draggable and InertiaPlugin, so it works once you paste it into your HTML.
How do I swap a card for my own image?
For the ring types, replace the <span> inside each .c3-card with an <img>. For the card stack, replace .cs-img with your image and edit .cs-text. Images use object-fit: cover so they fill the card.
Can I turn off auto-rotation / auto-play?
Yes. Toggle the auto-rotate / auto-play button. When off, the carousel is static and only moves when you drag (or swipe). The setting is reflected in the generated code.
Can users drag or swipe it?
Yes. It uses GSAP Draggable: the rotating types keep spinning with inertia after you release (InertiaPlugin), and the card stack moves forward/back with a swipe or tap.
Which type should I pick?
Use merry-go-round or ferris wheel for photo/product galleries, card stack for story-like sequential slides, and flower or cube for decorative hero sections. Start with the closest type and tune the radius, count and look-down angle.
Is GSAP free? Can I use it commercially?
Yes. GSAP and all of its official plugins (including Draggable and InertiaPlugin) are now free and can be used on commercial sites. The generated carousel code is free to use too.