Split Panel Carousel
A two-column layout pairing a text panel with an image carousel, supporting auto-rotation and multiple navigation styles.
Split Panel Carousel
A two-column layout that pairs a text panel (title, description, bullet points, and CTA buttons) with a multi-image carousel. The carousel supports auto-rotation, looping, and configurable navigation controls. You can flip which side the images appear on and control the mobile stacking order.
Adding in Strapi
- Go to Content Manager > Pages > select your page
- In the Design dynamic zone, click "Add component"
- Select "Media" > "Split Panel Carousel"
- Choose a variant (image-left or image-right) and fill in the text content
- Upload two or more images for the carousel slides
- Configure navigation controls, auto-rotation, and loop behaviour as needed
- Save and publish
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| variant | Enum | No | Layout direction: image-left (default) or image-right |
| mobileOrder | Enum | No | Stack order on mobile: image-first (default) or text-first |
| tag | Component | No | Tag label displayed above the title |
| title | Component | No | Main heading text |
| description | Blocks | No | Rich text description content |
| contentAlign | Enum | No | Text alignment: LEFT (default), CENTER, or RIGHT |
| divider | Boolean | No | Show a divider line below the description (default false) |
| bullet | Component (repeatable) | No | Bullet-point list items (max 8) |
| bulletGap | Integer | No | Gap between bullet items in pixels (default 24, range 0--48) |
| boxList | Component | No | Box list content section |
| button | Component (repeatable) | No | CTA buttons below the text content |
| images | Media (multiple) | No | Carousel slide images |
| autoRotate | Boolean | No | Enable automatic slide rotation (default false) |
| rotationInterval | Integer | No | Time between slides in milliseconds (default 5000, minimum 1000) |
| controls | Enum | No | Navigation type: dots, arrows (default), both, or none |
| loop | Boolean | No | Loop carousel when reaching the last slide (default false) |
| entranceAnimation | Component | No | Scroll-triggered entrance animation (fade, slide-up, slide-left, slide-right, none) |
Variants
ImageLeft
The default layout with the image carousel on the left and the text panel on the right.
Best for: Sections where the visual should draw the eye first, followed by supporting copy.
ImageRight
Mirrors the default layout with images on the right. Alternating between ImageLeft and ImageRight across sections creates a pleasing visual rhythm.
AutoRotate
Demonstrates automatic slide rotation. The carousel advances every few seconds and pauses when the visitor hovers or focuses on it.
SingleSlide
Shows the module with only one image -- navigation controls are hidden automatically since there is nothing to navigate.
EmptyState
Renders the module with no images uploaded, showing the fallback placeholder layout.
NullableFields
Demonstrates graceful handling of missing optional fields such as tag, description, and bullets.
Tips
autoRotateis turned off by default for accessibility. When enabled, the carousel automatically pauses on hover and focus, and respects the visitor'sprefers-reduced-motionsetting.- Use
image-leftandimage-rightalternately down the page to create a zig-zag reading pattern. - Set
mobileOrdertotext-firstif the text content is more important than the images on mobile. - Keep bullet lists to four or five items -- longer lists push the CTA buttons below the fold.
- If you enable
loop, the carousel wraps around seamlessly; if disabled, navigation stops at the last slide.