Free
Fit check
Great for
Renovation and interior design businesses
Photographers and retouchers
Salons, clinics and beauty businesses
Web designers showing redesign work
Know before you buy
- Check Common Ninja's current free plan view limits before using it on a busy page.
- Make sure your Squarespace plan lets you add code blocks.
- Try the editor demo on the vendor page before committing.
Version7.1
SetupEasy
Overview
Common Ninja's Before & After Carousel puts several before and after comparisons into one carousel, so a Squarespace page can show a run of transformations without stacking separate sliders down the page. Visitors drag the handle (or click the image) to reveal each change, then move on with arrows, dots or thumbnails. Reveals can run horizontally, vertically or at an angle, and each pair gets its own labels, caption and optional badge.
What you get
- Multiple before and after pairs in a single carousel, each with its own images, labels, caption and badge
- Drag or click to reveal, with horizontal, vertical, angle-right and angle-left directions
- Five carousel layouts, with arrows and dot, circle, square or thumbnail pagination
- Autoplay with adjustable timing, plus a random order option
- Square, portrait, landscape and widescreen ratios, and an optional full-screen view
- Responsive layouts, RTL support and custom CSS
Who it suits
Anyone whose work is best sold by showing the result: renovation and interior firms, photographers and retouchers, cleaners, landscapers, salons and clinics, and web designers showing redesigns. If you only have one comparison, Common Ninja's standard Before & After Slider is the simpler choice.
Honest limits
- Each comparison needs two images shot from the same angle and crop, or the reveal looks odd. That preparation is the real work here.
- It is an externally hosted embed, so it loads from Common Ninja's servers rather than from Squarespace.
- The free plan has monthly view limits; once a busy page passes the cap the widget can stop showing until you upgrade or the month resets.
- You need a Squarespace plan that lets you add code blocks.
How it is delivered
Sign up for a free Common Ninja account, build the widget in their visual editor, then copy the embed code from the Add to Website tab and paste it into a Squarespace code block. There is nothing to install on Squarespace itself and no files to download. The free plan is ongoing; paid Common Ninja plans are billed by Common Ninja and raise view limits and unlock extra features.
Related guide: Squarespace slider plugins and the Squarespace plugins hub.
Common Ninja's Before & After Carousel puts several before and after comparisons into one carousel, so a Squarespace page can show a run of transformations without stacking separate sliders down the page. Visitors drag the handle (or click the image) to reveal each change, then move on with arrows, dots or thumbnails. Reveals can run horizontally, vertically or at an angle, and each pair gets its own labels, caption and optional badge.
What you get: multiple before and after pairs in a single carousel, each with its own images, labels, caption and badge; drag or click to reveal, with horizontal, vertical, angle-right and angle-left directions; five carousel layouts, with arrows and dot, circle, square or thumbnail pagination; autoplay with adjustable timing, plus a random order option; square, portrait, landscape and widescreen ratios, and an optional full-screen view; responsive layouts, RTL support and custom CSS.
Who it suits: Anyone whose work is best sold by showing the result: renovation and interior firms, photographers and retouchers, cleaners, landscapers, salons and clinics, and web designers showing redesigns. If you only have one comparison, Common Ninja's standard Before & After Slider is the simpler choice.
Honest limits: Each comparison needs two images shot from the same angle and crop, or the reveal looks odd. That preparation is the real work here. It is an externally hosted embed, so it loads from Common Ninja's servers rather than from Squarespace. The free plan has monthly view limits; once a busy page passes the cap the widget can stop showing until you upgrade or the month resets. You need a Squarespace plan that lets you add code blocks.
Setup follows the usual Common Ninja routine: build it in their visual editor, paste one line of embed code into a Squarespace code block, and any later edits update on your site automatically. A free plan is available, with paid tiers for higher view limits and extra features.
What you get: multiple before and after pairs in a single carousel, each with its own images, labels, caption and badge; drag or click to reveal, with horizontal, vertical, angle-right and angle-left directions; five carousel layouts, with arrows and dot, circle, square or thumbnail pagination; autoplay with adjustable timing, plus a random order option; square, portrait, landscape and widescreen ratios, and an optional full-screen view; responsive layouts, RTL support and custom CSS.
Who it suits: Anyone whose work is best sold by showing the result: renovation and interior firms, photographers and retouchers, cleaners, landscapers, salons and clinics, and web designers showing redesigns. If you only have one comparison, Common Ninja's standard Before & After Slider is the simpler choice.
Honest limits: Each comparison needs two images shot from the same angle and crop, or the reveal looks odd. That preparation is the real work here. It is an externally hosted embed, so it loads from Common Ninja's servers rather than from Squarespace. The free plan has monthly view limits; once a busy page passes the cap the widget can stop showing until you upgrade or the month resets. You need a Squarespace plan that lets you add code blocks.
Setup follows the usual Common Ninja routine: build it in their visual editor, paste one line of embed code into a Squarespace code block, and any later edits update on your site automatically. A free plan is available, with paid tiers for higher view limits and extra features.
What it does
- Several before and after comparisons in one carousel
- Horizontal, vertical and angled reveal directions
- Thumbnail, dot and arrow navigation
- Autoplay and random order
- Full-screen viewing and responsive layouts
Full specifications
Specifications
Squarespace Version
7.1
Key Features
Several before and after comparisons in one carousel
Horizontal, vertical and angled reveal directions
Thumbnail, dot and arrow navigation
Autoplay and random order
Full-screen viewing and responsive layouts
Horizontal, vertical and angled reveal directions
Thumbnail, dot and arrow navigation
Autoplay and random order
Full-screen viewing and responsive layouts
Best for
Renovation and interior design businesses
Photographers and retouchers
Salons, clinics and beauty businesses
Web designers showing redesign work
Photographers and retouchers
Salons, clinics and beauty businesses
Web designers showing redesign work
Setup Difficulty
Easy
Considerations
Check common ninja's current free plan view limits before using it on a busy page.
Make sure your squarespace plan lets you add code blocks.
Try the editor demo on the vendor page before committing.
Make sure your squarespace plan lets you add code blocks.
Try the editor demo on the vendor page before committing.
FAQs
FAQs
What does the Before & After Carousel do?
It shows several before and after image comparisons inside one carousel. Visitors drag or click on each image to reveal the change, then move to the next comparison.
How is it different from the Before & After Slider?
The slider handles one comparison. The carousel holds many, with navigation, autoplay and thumbnails, so you can show a portfolio of results in one block.
How do I add it to Squarespace?
Build it in Common Ninja's editor, then paste one line of embed code into a Squarespace code block. Later edits in the Common Ninja dashboard update on your site automatically.
Is it free?
There is a free plan with monthly view limits. Paid tiers raise the view limits and unlock extra features, so check Common Ninja's pricing page before using it on a busy page.
Can the reveal run vertically?
Yes. Each comparison can reveal horizontally, vertically, or at an angle to the left or right, and you can set where the divider starts.
Does it work on mobile?
Yes. It adapts to desktop, tablet and mobile screens, and also supports right-to-left layouts.