Image Slideshow
An interactive product slideshow with animated expanding cards on a gradient background.
What It Does
The Image Slideshow module displays a collection of product or item cards in a horizontal carousel. When a card is selected, it smoothly expands to reveal a larger product image and a detailed description. Inactive cards show a compact preview with the title and size. The entire section sits on a customisable gradient background with navigation arrows.
Best Used For
- Product range showcases where each item has a distinct image
- Portfolio displays with expandable detail views
- Collection highlights on brand pages
- Any content that benefits from an interactive "click to reveal" card layout
Variants
Default
A gradient-background carousel with expandable cards. Each card has a coloured background, a product image that animates between compact and expanded states, and text that fades in and out based on the active selection.
Best for: Product catalogue sections where visitors browse through multiple items
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| slides | component | Yes | Collection of slide items (each with image, title, size, description, colours) |
| title | component | No | Section heading displayed above the carousel |
| description | component | No | Supporting text beside or below the title |
| primaryColor | customField | No | Left colour of the background gradient |
| secondaryColor | customField | No | Right colour of the background gradient |
| button | component | No | Call-to-action button for the slideshow section |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Use product images with transparent backgrounds for the best visual effect in the animated cards.
- Choose gradient colours that complement your product images -- the cards sit on top of this gradient.
- Keep descriptions concise (2-3 lines) as they are clipped on mobile to prevent overflow.
- Three to six slides provides the best browsing experience without feeling overwhelming.
Supported Languages
Fully bilingual -- all text fields support both English and Thai content.