Before / After Image Slider — Instructions
An interactive slider that wipes between two images as the visitor drags the handle — ideal for showing results, edits, or renovations. Works with mouse and touch.
1 · Preview it
Double-click snippet.html to see it working in your browser. It’s plain HTML, CSS & JavaScript — no install, build, or server needed, and no external libraries.
2 · Add it to your site with Claude
Keep this folder inside your website project (or anywhere Claude Code can read it), then ask Claude something like:
“Add the before/after image slider from snippet.html in this folder using my two photos.”
“Integrate this drag-to-compare slider on my Services page to show before and after results.”
Prefer to paste it yourself? Open snippet.html, copy the part you need, and tell Claude: “integrate this into [page], matching my site’s existing styles.”
Tip: point Claude at the file by name — e.g. “use the code in
snippet.html from the Before-After-Slider folder” — so it references the exact snippet.3 · Customize
- Replace the two demo images: set
srcon.ba__beforeand.ba__afterto your own photos (same dimensions). - Edit or remove the
Before/Afterlabels. - Change the frame size/shape via
.ba(aspect-ratio,border-radius).
Good to know
- No dependencies: works in any site — static HTML, WordPress, React, anything.
- Responsive & accessible: built to behave on phones and with keyboards.
- Yours to change: tweak the colors and text, or ask Claude to restyle it to your brand.
Prepared by Inner Web SolutionsBuilt with Claude