Using the 3D Image Carousel

A slick and dynamic take on traditional image carousels

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Bring instant movement and depth to static content with Vev's 3D Image Carousel—your winning widget from our last hackathon. Simply add three or more cards to create the carousel effect, and place images, text, or CTA buttons for some dynamic page navigation.

Add the 3D Image Carousel to your project

  1. From the top menu bar, click Add Menu (Shortcut: M)

  2. Search and select 3D Image Carousel

  3. Click and drag the element to your canvas

Configuration Options

Double-clicking the element on your canvas to open the configuration options. From here, you can:

  • define the gap between your cards (in px)

    • This is set to 40px for desktop and tablet, and 20px for mobile by default, but you'll want to adjust this depending on the number of cards you use.

  • add/edit images

  • add titles to your card

  • add subtitles/description of your card

  • enable/disable CTA button on your card

    • If enabled, you'll be able to select from a range of links (some settings may change depending on which link type you choose).

Link Type

Description

Configuration Options

Page

Links to internal pages in your project

Go to page: a dropdown menu where you can select the page you want to link to.

Animation: a list of animations for transitioning between pages.

Element

Links to a specific element or section in your project

Widget select: a dropdown menu where you can select the element you want to link to. Name widgets from the layers panel so that they show up.

External

Links to an external URL

External URL: a field where you can enter any URL. Remember to add "https://" before the domain name.

Open in a new tab: toggle to open the URL in a new tab.

Add rel=nofollow: toggle to add the rel=''nofollow'' attribute to your link.

Add rel=sponsored: toggle to add the rel=''sponsored'' attribute to your link.

Email

Redirects the user to Gmail with the specified email address as the recipient

Email: a field where you can define a recipient email address.

Subject: a field where you can define the email's subject line.

Phone

Redirects the user to make a phone call

Phone: a field where you can enter a contact number.

File

Allows the user to download a pre-loaded file

File to be downloaded: click to upload the file from your PC.

Target: choose the redirection's behavior (download, open in a new tab, or open in current tab).

Download filename: a field where you can enter the file's name.

  • Lastly, add/edit text to your button

Styling options

  • Background:

    • TE: Change the background of the CTA button (if enabled)

    • OV: Change the overlay

  • Text:

    • TE: Text Content Title

      • Style the title of the card

    • TE: Text Content Description

      • Style the subtitle of the card

    • TE: Text Content Link Button

      • Style the text of the button

    • NA: Navigation Arrows

      • Change the size and color of the arrows

  • Padding: Add padding to the button (if enabled)

  • Border: Set a border style and line weight for the button

  • Border Radius:

    • CA: Carousel Cell Content

      • Curve the radius of the card border

    • TE: Text Content Link Button

      • Curve the radius of the button border (if enabled)

  • Effects: Add different types of shadows or blur effects to the button (learn more about effects).

  • Icons:

    • Set custom shape: Replace the default icon with a shape or custom SVG (refresh your canvas after adding custom SVG for your icons).

    Note: Every style change will affect all cards.

Best practice

You can add as many cards as you want, but for the best experience on your mobile device, we recommend you add up to seven cards.

Did this answer your question?