Image carousels are an essential tool for presenting multiple visuals within a confined space on your webpage. They help keep your layout clean and organized by displaying several images in a single, compact area. Whether you're showcasing product images, portfolio pieces, or using them as interactive elements to guide visitors to different sections of your site, carousels offer a versatile and visually engaging solution.
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 |