Add a before and after slider to your website
Show a renovation, a retouch or a redesign as two photos that visitors reveal by dragging a handle. Describe it to Siter AI and place it on the page, no code or embed.
Two photos, one handle.
-
Visitors compare by hand
They drag the handle left and right, or use the arrow keys, to reveal the before or the after.
2 ways to reveal the photo
- Drag the handle
- Arrow keys
-
Describe it, Siter AI builds it
Siter AI writes the app and tests it, and shows you each step while it works.
4 steps while it builds
- Starting…
- Writing the app…
- Testing…
- Fixing an error…
-
It looks like your page
The slider takes your page's colors and fonts, so it sits in the page like anything else you placed.
5 things it takes from your page
- Brand colors
- Text color
- Background
- Corner radius
- Fonts
Say what you want, press Build.
Select the app and its panel holds the whole thing: the sentence that describes it, its name and height, and every version you made.
Place an App
The App tool sits in the left toolbar, after Code. One click puts it on the page, 800 wide.
What should the app do?
Describe the slider and press Build. Siter AI writes the app and tests it.
Name and Min height
Name it for yourself. Min height is the least room it takes, and it grows to fit what it shows.
Versions
Every change makes a new version. The one on the page is tagged Shown, and Restore brings an earlier one back.
On the page in three steps.
-
Add an App from the toolbar
Pick App in the left toolbar and click the page to place it.
-
Describe the slider
Type what you want, such as two photos of the same kitchen, and press Build.
-
Try it, then publish
Double-click the app on the canvas to drag the handle yourself, change it if you like, and publish.
Frequently asked.
How do I add a before and after slider to my website?
Place an App from the editor's left toolbar, then answer "What should the app do?" with a sentence such as a before and after slider of two photos of the same kitchen, and press Build. Siter AI writes the app and tests it.
Is this an image comparison slider?
Yes. Two photos of the same thing sit on top of each other, and a handle reveals one or the other as visitors drag it or press the arrow keys.
Can visitors use it from the keyboard?
Yes. Visitors drag the handle left and right, or use the arrow keys, to reveal the before or the after photo.
Will it match the rest of my website?
Yes. An app takes the page's colors and fonts, including your brand colors, text color, background and corner radius.
Is it an embed or a code snippet?
No. It is an element you place on the page like any other. It runs in its own sandbox, apart from your website, which has no access to your website's cookies or your account.
Can I change the slider after it is built?
Yes. Choose Change the app…, describe the change, and it becomes a new version. The version on the page is tagged Shown, and Restore brings an earlier one back.
Can I use it on the Free plan?
You can build and preview an app in the editor on the Free plan, but it shows on your published website only on a paid plan. Each paid plan has its own number of apps per website, listed on the pricing page.
More of what the editor does
- Custom domains Point a domain you own at the site, with HTTPS issued automatically, in every paid plan at no extra cost.
- Hosting and SSL No separate host to buy, no certificate to renew. It is part of the plan.
- HTML download Take a copy of a page and host it elsewhere. On Pro, and honest about the limits.
- Forms Design a form on the canvas and get the answers in your inbox.
- Custom fonts Upload the font files the design was made with, on every plan including free.
- Responsive design A layout for each breakpoint, custom widths included, laid out by you rather than guessed by the tool.
- SEO settings Per-page title, description and slug, plus custom meta tags in the head.
- Teams and roles Admin and Member roles on paid plans, with editor seats included and counted per website.
- Website analytics See visitors and top pages for every published site, plus sources, countries and devices on paid plans, with no cookies and no personal data.
- Animations Appear, loop and scroll motion, sticky headers, hover states and custom keyframes, set per element and previewed on the canvas.
- File hosting Upload PDFs, documents, audio and video and link to them from any button, image or line of text.
- Version history Restore any page from the last 30 days, and bring back deleted pages and websites within 14.
- Visual editor A free-form canvas with layers, auto layout, components and hover states, closer to a design tool than a block builder.
- Popups Open a popup from any button with Open overlay, or link it to a page, a section, a file, an email or a phone call.
- Countdown A live countdown to a sale, a launch or an event, and numbers that count up as visitors scroll to them.
- Tabs and marquee Tabs or a Monthly and Yearly toggle that switch parts of the page, and a strip of words or logos that runs without end.
- Apps Describe a calculator, quiz or booking request and Siter AI builds it on your page.
- Calculators A price, loan or ROI calculator or a product configurator, built from a description.
- Quiz A few questions and a result that points visitors to the right choice.
- Booking form Visitors pick a service, a day and a time, and the request reaches you in Form entries and email.
- Product configurator Visitors pick options, watch the price change and send their choice, built from a description.
- AI landing pages Describe a landing page and Siter AI designs it on a canvas you then edit, with a version saved before each change.
- Feedback form Visitors rate with stars, pick what they liked and add a comment, and it reaches Form entries and email.
- RSVP Guests say yes or no and how many, and every reply reaches Form entries and your email.
- Poll One question, a few answers, and live totals that every visitor sees, on a Pro website.
- Custom code Head code for the whole website or one page, and a Code element for embeds on the canvas.
- Images An image library for each website with folders and Unsplash search, plus an editor that crops, rotates and adjusts.
- Integrations Zapier for form responses, reCAPTCHA, Google Analytics, Facebook Pixel, video, fonts, Figma and any embed snippet.
Let the work speak
for itself.
Describe the slider, place it on the page and publish.