Image carousels have always been a foundation for displaying multiple images without using up precious real estate. You may want to simply use it as a way to showcase assets or use them as signposts to other areas of your website. The image carousel in Vev has a variety of options to help achieve the result you want.
🏞 Adding an Image Carousel
As an Element
From the top menu bar, click on the Add Menu (
Shortcut: M)Search for and select Image Carousel
Click and drag the element onto your canvas
As a Section
From the top menu bar, click on the Add Menu (
Shortcut: M)Search for and select Image Carousel
Click it
Press Alt
Click where it says Add section here
🖼️ Uploading an image
Double-click the Image Carousel
Click the pen icon under Image
Select Add image or choose an image from one of our free stock images libraries
Adding a New Image
Double-click the Image Carousel
Click the + icon located below the URL field
A new Image will be added, you can navigate through them to customize them as needed.
🎨 Styling an Image Carousel
Spacing top: Add padding to the top of the Image Carousel section in pixels or % to keep spacing between sections
Spacing bottom: Add padding to the bottom of the Image Carousel section in pixels or % to keep spacing between sections
Width: The width of an Image Carousel section can't be altered, it'll always be set to cover the 100%
Height: Set the height of the Image Carousel section in Pixels, % or set it to Auto so that it grows as you add content to it
Min H: Sets the minimum amount of height pixels an Image Carousel section can be. A red stippled horizontal line inside your section will reflect the minimum height
Clip content: Toggle to hide the content that goes beyond the section's edges
Resize to fill vertically: Click to set the section's height to 100%
Background:
BU: Change the button's color
Overlay: Change the carousel's overlay color
Text:
Title: Style the title text
Description: Style the description's text
BU: Set the Button's label size, color, and style its text
Arrow: Change the arrow's color
Border: Set a border color, opacity, and line weight for the button
Border Radius: Curve the radius of the button's border
Transform: Set the button's height and width
Icons: Replace the arrows icons with a custom share or image
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 element 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 mode 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.
The configuration options are detailed in the chart below:
Parameter | Option |
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 |
|
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) |