After this video you can build a rotating 3D carousel in Drupal from one paragraph, setting your own item height, rotation speed and depth without touching CSS.
The paragraph type being created
The sub-module paragraph_bundle_3d_carousel installs a single paragraph type, 3d_carousel_bundle, shown in the editor as 3D Carousel. Its Content tab carries a nested field named 3D Carousel Items, so every item on the ring is itself a paragraph: an image, a card, a block, or any other bundle you have switched on.
The settings demonstrated
- Large Screen Height and Small Screen Height — one height applied to every item, chosen from 100 px upwards.
- Perspective — the depth of the 3D effect in pixels. It follows the width you choose, and you override it when the ring looks too flat or too deep for the number of items.
- Time in seconds — the rotation interval. Anything between 3 and 15 seconds also adds a play/pause button and makes the carousel pause under the mouse pointer.
- Available breakpoints — 576, 768, 992, 1200 and 1400 px, when one screen size needs its own treatment.
What the visitor's browser receives
The rendered carousel carries role="group", an aria-roledescription, a role="status" region that announces the current item, and an aria-pressed play/pause button. Arrow keys move between items, and the stylesheet honours prefers-reduced-motion, so rotation stops for anyone whose system asks for less animation.
What has to be installed first
Read straight from paragraphs_bundles.info.yml: core_version_requirement: ^11.3 || ^12. This is a Drupal 11.3 and Drupal 12 module — on Drupal 10 it will not install. Enable the base module, then the 3D carousel sub-module.
Start at the Paragraphs Bundles module page, and read best practices for using a 3D carousel before you put one above the fold.
Need someone to own the whole build rather than one region of it? Drupal architecture services — or get in touch.
