Carousel
A 3D-perspective image carousel that lets visitors browse through a collection of images with swipe and click navigation.
What It Does
The Carousel module displays a collection of images in a rotating 3D carousel layout. The currently selected image appears front and centre at full size, while neighbouring images recede into the background at smaller scales. Visitors can navigate using arrow buttons on desktop or by swiping and dragging on any device.
Best Used For
- Product showcases where each item has a distinct image
- Brand portfolio displays with logo or packaging visuals
- Event or campaign highlight galleries
- Any visual collection that benefits from a focused, one-at-a-time viewing experience
Variants
Portrait
Images are displayed in tall, portrait orientation. The carousel items are spaced closer together and the section is taller to accommodate the vertical aspect ratio.
Best for: Product bottles, cans, or packaging shots taken in portrait orientation
Landscape
Images are displayed in wide, landscape orientation. The carousel items spread further apart horizontally, and the section adjusts its height for the wider format.
Best for: Banner images, scenic brand photography, or wide promotional visuals
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| sectionTitle | component | No | Heading text displayed above the carousel |
| description | component | No | Supporting text below the section title |
| imageOrientation | enumeration | Yes | Controls whether images display as Portrait or Landscape |
| carouselImages | component | Yes | Collection of images to rotate through (minimum 3) |
| backgroundColor | customField | No | Background colour of the entire carousel section |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Use at least 3 images for a smooth carousel effect. Five images provides the best visual balance.
- Keep all images the same dimensions and aspect ratio for consistent scaling.
- Choose a background colour that contrasts well with your images so the 3D depth effect is visible.
- On mobile, users navigate by swiping — ensure images are large enough to be appreciated at smaller screen sizes.
Supported Languages
Fully bilingual — title and description fields support both English and Thai content.