Add motion and dimension to your static content with Vev's 3D Image Carousel—the standout component from our latest hackathon. This interactive feature grabs attention and boosts engagement on your site. Just insert three or more cards to activate the carousel, then fill them with images, text, or CTA buttons for a lively browsing experience. It’s a perfect tool for presenting your products or portfolio in a more visually compelling way.
When to Use the 3D Image Carousel
Use the 3D Image Carousel when you want to:
Display multiple images in a rotating, visual format (e.g., product photos, design showcases).
Create an interactive gallery with depth and movement.
Capture user attention with a dynamic visual flow instead of a static grid or simple slideshow.
Styling 3D Image Carousel
Note: If the Card Slider feels too limiting in terms of customization, we recommend switching to the Slider component. It offers greater flexibility, allowing you to fully express your creativity and adapt the design to meet your unique requirements.
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. |
Link button label | Add/edit text to your button |
Best Practices for Using 3D Image Carousel
Choose images with matching aspect ratios so the carousel maintains a consistent look.
Keep the total number of images reasonable (e.g. 5-10), to avoid overwhelming users or degrading performance.
Use concise captions or labels, either overlaid or below each image, to give users context (e.g., product name, location).
Test transitions at different speeds to find a balance: fast enough to feel dynamic, slow enough not to confuse.
Verify how the carousel behaves on mobile devices, adjusting settings so touch/swipe works smoothly and visuals aren’t cramped.
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.