How do I add a before-after slider to my website?

Add the OneType Transforms script tag to your site, then wrap two images in a div with the ot="before-after" attribute. The first image becomes the before side, the second becomes the after side. The slider appears automatically.

Is the before-after image comparison slider free?

Yes. The before-after slider from OneType Transforms is completely free. No account needed, no token required, no usage limits. Just add the script tag and start using it on unlimited domains.

Does the before-after slider work on mobile devices?

Yes. The slider uses a native range input that supports touch dragging on phones and tablets. It also works with keyboard navigation and screen readers. The images scale responsively to fit any screen size.

Can I use a before-after slider on Webflow or WordPress?

Yes. It works on Webflow, WordPress, Squarespace, Shopify, Framer, and any platform that allows custom HTML. Add the script tag once, then place the slider HTML wherever you want it.

Can I customize the before-after slider direction and labels?

Yes. Use HTML attributes to set vertical mode, add text labels, change the starting position, or enable hover mode. All options are controlled through attributes like ot-direction, ot-label-before, ot-label-after, ot-position, and ot-hover.

How to Add a Before-After Slider to Any Website