Before and After Slider

Before and After Slider from Elfsight puts two images on top of each other on a Squarespace page with a draggable divider between them, so a visitor can slide left and right (or up and down) to compare the before state with the after. It is an embeddable widget hosted on Elfsight's platform rather than native Squarespace code. In Elfsight's editor you upload the two images, choose a horizontal or vertical divider, set the image ratio and styling, and optionally enable a fullscreen mode that opens the comparison at full size. You then paste the embed code into your site.

Who it suits

Anyone whose work is best shown as a comparison: renovation and landscaping firms, cleaners, decorators, photo retouchers, dentists and aesthetic clinics, car detailers and web designers showing a redesign. Squarespace has no native comparison block, so this fills a genuine gap. A free plan is available to start with.

One honest caveat

The effect only works when both images are taken from the same angle at the same size, so it demands discipline in how you shoot. The widget also loads from Elfsight's servers, free-tier widgets carry Elfsight branding and monthly view limits, and if you only need one or two comparisons a single-purpose code snippet might be lighter than a hosted widget.

Installation

Build the slider in Elfsight's editor, copy the embed code and paste it into a Squarespace code block where you want the comparison to appear. Edits made later in the editor update on your site automatically.