Using the Image Carousel element

Learn how to add and customize a sliding gallery of image tiles

Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

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

desktop: the number of tiles visible at a time when viewing on a desktop device.

tablet: the number of tiles visible at a time when viewing on tablet mode.

mobile: the number of tiles visible at a time when viewing on mobile 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)

Did this answer your question?