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