Carousel
A carousel cycles through media or rich content. Two distinct modes:
- Images mode — picks from the media library, animates between
- Slides mode — each slide is a configurable content slot
images.
(background colour, vertical alignment) that can hold any elements.
Pick the mode that matches what you're showing. Image-only? Use Images. Need text + button per slide? Use Slides.
When to use it
- Hero with cycling messages (Slides mode)
- Logo strip / image gallery with auto-scroll (Images mode)
- Image carousel (Images mode)
- Testimonial cards (Slides mode)
When not to use it
- Single image — use Image
- Multi-image grid (no cycling) — use Carousel
- Front/back card on hover — use Flip Box
Mode toggle — Images · Slides (top of panel)
Switches between the two configuration sets. Settings don't carry over: a Cube effect picked in Images doesn't appear in Slides.
Images mode
Add Images — button
Opens the media library to add to the image set. Each image in the list gets a thumbnail and an editable Link URL field for a click-through target.
Animation Mode — 3-column button grid (12 options)
The animation engine for cycling between images:
- Coverflow — classic 3D cover-flow stack
- Scroll — continuous horizontal/vertical strip
- Cube — rotating 3D cube faces
- Depth — z-axis depth-rush transition
- Conveyor — staggered conveyor-belt motion
- Portal — depth-portal effect
- Orbit — 3D orbital rotation
- Turntable — turntable-style rotation
- Flip — card-flip transition
- Pixels — pixel-decode transition
- Jackpot — slot-machine reels
- Reels — multi-reel scroll
Direction — left / right (Scroll, Orbit, Turntable only)
Travel direction for the modes that scroll.
Object Fit — Cover · Contain (default: Cover)
How images sit in the frame. Cover crops to fill; Contain fits inside.
Background — colour swatch (right-aligned)
Background colour shown behind images. Visible when Object Fit is Contain (gaps around image).
Pause on Hover — checkbox (default: on)
Pauses autoplay when the cursor is over the carousel.
Autoplay — checkbox (default: on)
Auto-cycles images.
Sliders
- Speed — 1–10 (default 3). Scroll mode only.
- Delay — 1–15s (default 4). Time on each image before advancing.
- Visible (
items_to_show) — 1–8 (default 1). Scroll, Orbit, - Gap — 0–60px (default 0). Spacing between visible images.
- Sensitivity (
tilt_sens) — 0–10 (default 5). Mouse / tilt - Height — 40–800px (default 400)
- Max Width — 10–100% (default 100)
- Radius — 0–30px (default 0)
- Margin Top / Bottom — 0–100px (default 0)
Turntable only — sets how many images are visible at once.
Scroll/Orbit/Turntable only.
reactivity. Orbit, Turntable, Cube only. 0 disables.
Slides mode
Slide tabs — numbered row
Each slide is a numbered button (1, 2, 3…). Click a number to switch to editing that slide. Drag to reorder. Right-click for the slide context menu (Add / Duplicate / Delete).
Per-slide settings (in the Slide N divider)
#### Vertical Align — Top · Center · Bottom (default: Center)
Where the slide's content sits vertically.
#### Background — colour swatch
Per-slide background colour.
Autoplay — checkbox (top-right of slide settings)
Same setting as in Images mode; lives next to the per-slide Background here.
Slider Effect — 3-column button grid (8 options)
Transition between slides:
- Slide — standard horizontal/vertical slide
- Scroll — continuous strip
- Coverflow — 3D cover-flow stack
- Cube — 3D cube rotation
- Conveyor — conveyor-belt motion
- Portal — depth-portal effect
- Depth — z-axis depth rush
- Flip — card flip
Direction — ← / → / ↑ / ↓ (Slide effect only)
Travel direction. Only appears when Slider Effect is Slide.
Sliders
- Height — 100–900px (default 500)
- Max Width — 200–1600px (default 1200)
- Visible (
items_to_show) — 1–6 (default 1) - Gap — 0–60px (default 0)
- Transition — 100–2000ms (default 400)
- Delay — 1–15s (default 5)
- Sensitivity (
tilt_sens) — 0–10 (default 5). Cube only.
What's NOT configurable in the panel
These behaviours are baked in (no toggle):
- Drag / swipe gestures — always on for mobile.
- Arrows / dots / pagination — automatic, derived from effect
- Loop — always loops.
- Pause on Hover — only in Images mode (not Slides).
and slide count. Not surfaced as toggles.
If you need fine pagination control for a specific design, drop the carousel and build a custom block.
Per-device overrides
Most layout settings (Height, Max Width, Visible, Gap, Margin Top / Bottom) have separate Tablet and Mobile values.
Common overrides:
- Visible — typically 3–4 desktop · 1 mobile (single-slide on
- Gap — narrower on mobile
- Sensitivity — set to 0 on mobile (no cursor; gamma tilt is
phones)
the substitute and may be undesired)
Common patterns
Logo strip (always in motion)
Images mode · Animation Mode Scroll · Direction left · Visible 5–6 · Gap 32 · Autoplay on · Speed 3 · Pause on Hover off · Height 80.
Image carousel
Images mode · Animation Mode Cube or Coverflow · Visible 1 · Sensitivity 5–8 · Height 600 · Margin TB 64.
Testimonial cards (text + author per slide)
Slides mode · Slider Effect Slide · Visible 3 desktop · 1 mobile · Gap 24 · Per slide: dark Background · Vertical Align Center.
Hero with cycling messages
Slides mode · Slider Effect Slide · Visible 1 · Direction left · Delay 6s · Per slide holds Heading + Text + Button.
Don't
- Don't autoplay long readable content (testimonials with paragraphs)
- Don't set Visible > 1 on mobile — content gets too small.
- Don't pile multiple carousels on a single page — visual noise.
- Don't use Cube + Sensitivity 10 + fast autoplay — motion sickness
at fast Delay — visitors hate having content swept away mid-read.
territory for some viewers.
Related
blocks/image— single imageblocks/grid— image galleries and multi-image grids without cyclingblocks/flip-box— single front/back card flipblocks/section— wraps a carousel; use for full-bleed backgroundconcepts/responsive-overrides— per-device sizing