How can I add a before-and-after image slider to a Wix portfolio?

Compare visual work without sending visitors to another page

A before-and-after image slider lets visitors drag a handle across two images to compare them in the same space. It is useful for a Wix portfolio that needs to show a renovation, design revision, photo edit, restoration, or other visible transformation.

What to create with AI Components

In AI Components: Custom Widgets, describe a focused frontend widget: a before-and-after image comparison slider with two supplied images, a clear draggable divider, readable labels, and a layout that fits the site theme. Use the live preview to check the starting position, label contrast, and height before publishing it to the page.

Details that make the comparison useful

• Use two images with the same crop and viewpoint so the change is easy to see.
• Label each side plainly, such as Before and After, and explain the work nearby in normal page text.
• Keep the widget away from the primary contact or booking action so visitors can still move to the next step.

Frontend limits to plan for

This is a visual frontend component. It can present the supplied images and respond to a visitor dragging the divider, but it does not create a database, save visitor choices, manage member accounts, or run server-side workflows. Use Wix features designed for forms, bookings, or follow-up if the page needs to collect information after the comparison.

Check it on the published page

Preview the slider on desktop and mobile. Make sure the images remain recognizable at the displayed size, the handle does not obscure important detail, and the page still works for visitors who choose not to interact with the component.