A Slider is a versatile tool for displaying a sequence of content within a single container. It allows you to:
Convey information step by step.
Tell a compelling visual story.
Showcase collections of images, videos, or items.
The new Slider in Vev is designed to replace many of the older slideshow-style components found in the Add menu, such as image carousels, video slideshows, and other frame-based elements that iterate with pagination.
With the Slider, you can cover many common use cases more flexibly, including:
Testimonials
Image galleries
Video showcases
Multi-frame storytelling in one section
Beyond the obvious (galleries, slideshows, testimonials), here are some strong use cases:
Common Use Cases for Sliders in Vev
Product Showcases – Highlight different product angles, variations, or features in one section.
Case Studies / Portfolio – Present projects or client work in a browsable sequence.
Step-by-Step Tutorials – Walk users through instructions or onboarding flows.
Feature Highlights – Dedicate each slide to a single feature, benefit, or selling point.
Team or Speaker Profiles – Display team members or event speakers with photos + bios.
Event or Timeline Displays – Use slides to represent chronological events, milestones, or a brand story.
Campaign / Landing Pages – Cycle through value propositions, CTAs, or offers without overwhelming users in one static block.
Interactive Storytelling – Combine images, text, and video into a narrative sequence.
Customer Reviews / Social Proof – Cycle through user-generated content, ratings, or quotes.
Hero Section Carousels – Use multiple slides in a homepage hero for different campaign messages.
Data or Infographic Slides – Break complex visuals into bite-sized chunks with smooth navigation.
👉 Essentially, anywhere you have different frames of content in the same space, the Slider replaces old “slideshow” style elements and gives more customization.
Here's a step-by-step guide on how to set up your first slider:
Adding a Slider
Open the Add Menu: Click the + icon to open the Add menu.
Search for "Slider": Use the search bar to find the Slider component.
Select and Place: Click on the Slider component and drag it onto the canvas to add it to your project.
Editing a Slider
A slider displays content one "slide" at a time. To edit the individual slides, you must enter the Slider edit mode. This mode gives you access to the content within the slider container.
Entering Edit Mode
You can enter the Slider edit mode in several ways:
Double-click: Double-click the slider on the canvas.
Layers Panel: Click the 'Edit' button in the left layers panel.
Properties Tab: Click 'Edit Content' from the slider's Properties tab.
Right-click: Right-click on the slider and choose 'Edit Slider'.
When you enter edit mode, the layers panel on the left will only display the layers within the slider, and the canvas will visually emphasize the slider container.
Adding and Editing Content within the Slider
Once you are in edit mode, you can add and edit content within your slides just as you would with any other element on your page.
Start with the initial slide: The slider will automatically include a first slide for you to begin with.
Add content: Drag and drop elements like text, images, or buttons onto the current slide.
Add new slides: To add more slides, click the 'Add New Slide' button at the bottom of the layers panel or the '+' icon in the top-right corner of the layers panel.
Adjust slide order: Change the order of your slides by dragging and dropping them in the layers panel.
Preview: Use the preview button to see how the slide you are currently working on will look.
Exiting edit mode
To exit edit mode and return to your main page view, use one of these methods:
Double-click: Double-click anywhere outside the slider container.
'Close' button: Click the 'Close' button in the top-right corner.
Layers path: Click the 'Layers' path in the top-left of the layers panel.
Keyboard shortcut: Press the esc key on your keyboard.
Upon exiting, the layers panel and the canvas will return to their normal appearance, showing all the layers on your page.
Adjusting slider properties
To customize your slider's behavior, select it and click the 'Properties' tab (make sure you are not in edit mode). Here you can adjust:
Animation: Choose a transition style, such as Slide, Zoom (with scaling options), Fade, or 3D (with gap and perspective settings).
Animation Duration: Set the speed of the transition.
Direction: Choose the direction of the animation.
Randomize: Play slides in a random order.
Infinite: Make the slider loop continuously (enabled by default).
Adding slider interactions
Unlike some older slideshow components, the Slider will not work automatically on its own. You need to create interactions and connect navigation buttons to the slider for it to function.
How to Set Up Interactions
Add Buttons: Create navigation elements (e.g., arrows, dots, or custom buttons) on your canvas.
Connect to Slider: Use slider-specific interactions, which can be quickly accessed in the Interactions tab, to link your buttons to the slider.
Available Slider Actions
Go to the next slide – Move forward one slide.
Go to the previous slide – Move back one slide.
Jump to a specific slide – Directly navigate to any slide in the sequence.
Mobile-Friendly Interaction
On mobile devices, it’s best practice to add an “On swipe” → Go to next/previous slide interaction.
This ensures users can navigate naturally with touch gestures, just like they expect in apps and mobile sites.
Optional Enhancements
Autoplay sequences: Use timed interactions if you want slides to advance automatically without user input.
Learn how to set up these interactions in our detailed guide.