Image Carousel
A display-only swipeable image gallery with configurable orientation, aspect ratio, and navigation.
The Image Carousel field displays a scrollable gallery of images. It does not collect user input. Use it for product showcases, portfolio galleries, before/after comparisons, or any scenario where users need to browse through multiple images.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | -- | Heading text displayed above the carousel |
| width | LayoutWidth | "full" | Horizontal space the field occupies |
| images | string[] | -- | Array of image URLs to display |
| initialIndex | number | -- | Zero-based index of the image to show first |
| orientation | string | -- | Scroll direction: "vertical" or "horizontal" |
| infinite | boolean | -- | Whether the carousel wraps around after the last image |
| imagesPerView | number | -- | Number of images visible at once in the viewport |
| aspect | AspectRatio | -- | Image aspect ratio: "1:1", "3:4", "4:3", "9:16", or "16:9" |
| imageRadius | BorderRadiusName | -- | Corner roundness of each image: "square", "small", "medium", "large", "xlarge", or "full" |
| imageShadow | ShadowLevel | -- | Shadow depth on each image: "none", "sm", "md", or "lg" |
Example Usage
A horizontal product gallery showing three images at a time:
{
"type": "imageCarousel",
"label": "Product Gallery",
"orientation": "horizontal",
"imagesPerView": 3,
"infinite": true,
"aspect": "4:3",
"imageRadius": "medium",
"imageShadow": "sm",
"images": [
"https://example.com/product-1.jpg",
"https://example.com/product-2.jpg",
"https://example.com/product-3.jpg",
"https://example.com/product-4.jpg"
]
}