custom HTML slider, stitch and snare

Running a Before/After Slider Without a Plugin – DIY Approach

BySteve Sparacino Published Updated

One of my favorite things about working on web development projects is finding clean, efficient ways to solve problems without overloading a site with plugins. When it came time to build a before/after image slider for a recent web-project, I knew I wanted to avoid the bloat of another third-party plugin. Instead, I went the custom route, and upon some errors and tests, I was able to figure this out!

Here’s a breakdown of how I approached building a responsive, lightweight before/after slider using just HTML, CSS, and JavaScript.

The Goal

Create a responsive before/after slider:

  • Without a plugin
  • That scales on mobile and desktop
  • That looks polished and loads fast
  • That could eventually support scroll-activated animation (optional phase 2)

Step 1: Selecting a Base

After a few tests, I landed on an open-source JavaScript solution called BeerSlider. It’s lightweight and gives you the drag-to-reveal effect out of the box. I liked it because it was:

  • Minimal (under 2KB gzipped)
  • Vanilla JS (no jQuery dependencies)
  • Easy to style

Rather than installing it via npm or integrating with a builder plugin, I went manual:

  • Hosted the CSS/JS via CDN
  • Wrote clean wrapper HTML

Step 2: Custom Styling

The default styles were okay, but I wanted it to:

  • Match the color palette
  • Flex with the site grid
  • Use clean, modern typography and aspect ratios

I updated the wrapper with responsive CSS — see example code below:

.beer-wrapper {
  max-width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.beer-slider,
.beer-slider img,
.beer-slider .beer-reveal img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Step 3: Functionality + Fallbacks

To keep it flexible:

  • I added simple JS initialization
  • Tested fallback experience for non-JS browsers
  • Added alt text and lazy loading to images
<script>
  new BeerSlider(document.getElementById("slider"));
</script>

Lessons Learned

  • Scroll-based animation is trickier than expected (and might need a GSAP-type solution or Intersection Observer for best performance).
  • Hosting your own assets gives more control (especially when tweaking CDN-lag issues).
  • Responsiveness is everything – using aspect-ratio was a lifesaver across breakpoints.

Final Thoughts

I’m a big believer in minimizing what you add to a WordPress (or any CMS) build. Custom solutions like this not only load faster, they give you full control of the front-end experience — and accessibility into further changes and tweaks that are needed as well.

If you’re interested in the exact code I used or want help implementing your own custom slider, feel free to reach out and contact us!

More builds coming soon!

More from us: