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 the static content with Vev's 3D Image Carousel—your winning component from our last hackathon. It's an engaging feature that can captivate your audience's attention and make your website more interactive. Simply add three or more cards to create the carousel effect, and place images, text, or CTA buttons for dynamic page navigation. This is an ideal way to showcase your products or portfolio with a more engaging and dynamic approach.

Styling 3D Image Carousel

Note: If you feel that the card slider 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.

  • 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)

  • 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.

Configuration Options

Double-click the 3D Image Carousel on your canvas to open the configuration options.

Parameter

Description

Gap between tiles (px unit)

This is set to 60px for desktop, 40px tablet, and 20px for mobile by default. You can adjust the settings depending on the number of cards you use and the breakpoint to ensure it's more responsive

Add, edit, delete image

Image for the carousel item

Title

Title for the carousel item

Description

Subtitle/description of your carousel item

Enable/disable CTA button

Add a button to your carousel item.
If enabled, you'll be able to select from a range of links (check the configuration options of links here).

Link button label

Add/edit text to your button

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.

Limitations

  • The CTA button will expand in size as the title does, keep this in mind when writing your description. Try to add line breaks in your description to avoid expanded button size.

Did this answer your question?