How to Build a Responsive Before/After Image Slider in Wix Studio with Velo
- WIXFULL
- Mar 31
- 3 min read
A before/after slider is one of those components that looks simple at first glance but makes an immediate visual impact. It works especially well for redesign case studies, UI comparisons, photo retouching, renovation showcases, and product demos where a static screenshot does not tell the full story.
In this walkthrough, we will build a responsive before/after image slider for Wix Studio using an HTML Component and Velo page code. The slider will support both desktop drag and mobile touch input, and it can be powered either by CMS images or by static image URLs passed directly into the widget.
What You Will Build
A reusable HTML Component for the before/after slider interface.
A draggable divider with touch-friendly interaction.
Page code that sends images and labels into the component with postMessage().
A CMS-driven version for dynamic content.
A static version for quick demos and landing pages.
This structure works well because the visual behavior lives inside the HTML widget while the Wix page code stays focused on data. That keeps the component reusable and easier to maintain across multiple pages.
Why an HTML Component Is the Right Fit
Wix Studio gives you strong layout control, but components like before/after sliders are usually easier to build inside an HTML Component when you need full control over dragging, clipping, labels, and runtime updates. Instead of fighting the native editor, you can isolate the interaction inside a clean widget and let the page decide which images should be shown.
Insert HTML Component Here: before-after-live-preview-widget.html
The live demo uses real photos so the interaction reads like an actual design comparison rather than a placeholder mockup. That makes it much easier to understand how the finished component will feel inside a blog post, case study, or portfolio page.
Recommended CMS Structure
If you want to make the slider content editable by non-developers, create a collection such as Comparisons and add fields like title, beforeImage, afterImage, beforeLabel, and afterLabel. Once that structure is in place, the page code can query the collection and push the latest comparison item into the slider.
HTML Component Code
The HTML Component is where the comparison UI lives. It renders two stacked images, clips the top layer, and updates the divider position as the user drags left or right.
Page Code with Static Image URLs
The fastest way to test the slider is to send two direct image URLs from the page. This is useful when you want a quick demo version before connecting the widget to CMS data.
Page Code with CMS Data
When your images live in a Wix CMS collection, query the item you need and send it into the HTML Component. If the collection returns a wix:image:// value, convert it into a public image URL before assigning it to img.src inside the widget.
Page Code with a Connected Dataset
If the page already has a dataset connected to the same collection, you can skip the manual query and read the current item directly. That often leads to a cleaner setup on dynamic pages and template-based layouts.
Common Mistakes to Avoid
Passing wix:image:// directly into the HTML widget without converting it first.
Calling postMessage() before the page or dataset is ready.
Giving the HTML Component too little height to display properly.
Using field keys that do not match your collection schema.
Expecting the HTML widget to query Wix data directly instead of receiving data from page code.
Final Thoughts
A responsive before/after slider can add a lot more than visual polish. It helps visitors understand the value of a redesign, compare results instantly, and interact with your content in a way that feels far more engaging than a static image.
If you want help building a custom slider like this for your Wix Studio site, connecting it to your CMS, or turning it into a reusable component for case studies and landing pages, get in touch with us. We can help you design, build, and integrate the full experience so it looks polished and works smoothly across every device.
