The Gallery Carousel component allows you to create image sliders with a configurable number of images visible on screen at any one time, providing a flexible and engaging way to display images.
This component offers a variety of configuration options, organised into the following categories:
| Settings |
This section contains general settings that are common to all components within the system:
- Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
- Desktop/Mobile Padding: Adjust the top and bottom padding for both desktop and mobile views.
- Section Background Colour: Choose a background colour from a pre-configured list of brand colours.
|
| Animation |
Administrators can select from seven different entrance animation options for the gallery carousel:
- None
- Slide in from the top
- Slide in from the bottom
- Slide in from the left
- Slide in from the right
- Fade in
- Grow in
|
| Slider Configuration |
This section allows administrators to fine-tune the behaviour of the slider:
- Slide Duration: Set how long each slide remains on screen before switching to the next. The default duration is 6 seconds. Hovering over or interacting with the slide will pause the timer.
- Icon Colour: Choose the outline and background colours for the slide indicators from a list of brand colours.
- Slides to Show (Mobile Horizontal): Set the number of slides visible at a time on resolutions between 768px and 1023px wide. For resolutions narrower than 768px, only 1 slide will be shown.
- Slides to Show (Tablet): Set the number of slides visible at a time on resolutions between 1024px and 1279px wide.
- Slides to Show (Small Desktop): Set the number of slides visible at a time on resolutions between 1280px and 1535px wide.
- Slides to Show (Large Desktop): Set the number of slides visible at a time on resolutions wider than 1535px.
- Gallery: Multi-select image uploader, which allows administrators to upload, and determine the order of images to be displayed within the gallery.
|
You can view examples of Gallery Carousels with various styles and animations here.
