Image carousels are a fundamental tool for displaying multiple images within a limited space on your webpage. They allow you to showcase various visuals in a single, compact area, helping to maintain a clean and organized layout. Image carousels can be used in multiple ways: you might use them to highlight a series of assets, such as product images or portfolio pieces, or as interactive elements that serve as signposts directing visitors to other areas of your website.
Note: If you feel that the Image Carousel doesn't offer enough customization options, we recommend using the Slider component instead. It will enable you to unleash your creativity and tailor it to your specific needs.
Device Breakpoints
Users can uniquely specify the number of tiles to display for each device mode including desktop, tablet, and mobile mode. Double-click the Image Carousel component of your canvas to open the configuration options.
Specify the number of tiles you wish to be visible for each of the listed device modes. Once completed, switch between device modes for desktop, tablet, and mobile to view the layout.
Configuration Options
Once you've added the Image carousel to your canvas, there are a variety of configuration options, including adjusting how many images per breakpoint.
To start, double-click the Image carousel to open the configuration options:
Parameter | Description |
Image | Specify the background image to go in place of the tile's background. |
Title | The title for the tile, visible in the topmost dominant position of the tile's content. |
Description | Body text for the tile, visible beneath the title text as a sub-dominant piece. |
Button Label | The visible text label in the button of the tile. |
URL | The target destination of the button. |
Number of visible slides per device mode |
|
Number of visible slides per custom breakpoint | the number of tiles visible at a time when viewing on a custom breakpoint |
Autoplay | Slides through the image carousel automatically. |
Autoplay Interval Speed | The interval for which the carousel pauses before automatically continuing to the next tile in the carousel. (Only when autoplay is ON) |
Previous/Next arrow position | The position of the navigation arrow |
Loop the carousel | Makes the carousel loop infintely |
Surpress animation on hover | Disables the Button appearance on hover |