A Card Slider is a carousel-style layout that organizes information into compact, easy-to-browse cards. It is an effective tool for concisely presenting a collection of items, especially when space is limited. Card sliders can feature images, titles, subtitles, and call-to-action buttons, making your content more visually appealing and interactive.
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.
Adding and Navigating Cards
To configure the cards within the slider, you must first access the editing mode.
Double-click the Card Slider component on your canvas.
To add a new card, click the + button at the bottom of the pop-up panel.
You can navigate through the cards to customize the text and images for each one.
Uploading an Image
Each card can feature an image. To upload an image for a card:
Double-click the Card Slider on your canvas.
In the Icon field, click the pen icon.
Upload your own image or choose one from one of Vev's free stock image libraries.
Styling a Card Slider
You can customize the appearance of the Card Slider in the right-side styling panel.
Background:
IM (Image): Change the background of the image banner.
TE (Text): Change the background of the text container.
Link: Change the background of the link button.
Text:
Title: Style the main title text.
Subtitle: Style the subtitle text.
Body: Style the body text.
Link: Style the link text.
BO (Hover): Style the bottom link when the user hovers over it.
Navigation Arrows: Change the color of the navigation arrows (if enabled).
Transform: Change the height of the image banner.
Icons:
Set custom shape: Replace the default icon with a shape or a custom SVG.
Set custom image: Replace the default icon with a custom image.
Configuration Options
Double-click the Card Slider on your canvas to open the configuration options, where you can adjust various settings:
Image: The main image for each card item.
Custom image size: Set a custom height for the image. The width will automatically scale to maintain the aspect ratio.
Title: The top-most text in the card's text group.
Sub-title: The second line of text in the card's text group.
Body: The main body text of the card.
Link label: The text that appears on the link button.
Link: The destination URL that the user will be directed to when they click the link.
Horizontal image alignment: The left-to-right alignment of the image within the card.
Hide arrows: A setting to show or hide the left and right navigation arrows.