Comparison Image Slider

I’d been trying to work out how to create an image comparison slider to show before and after photographs for a local driveway company. This is where you have two photographs in the same image, and a slider in the middle. As you move the slider left and right, you see more of each image.

I wanted something pretty lightweight which could be used on multiple pages on their WordPress site. This is the solution I found, which uses a combination of HTML, CSS and JavaScript and was created by sneas. For all the clever stuff, please follow this link.

This guide below is just for my reference so I can remember how to do it in the future!

Step-by-Step Guide

First off, we need to call the JavaScript which does all the heavy lifting. I used the WP Code Snippets plugin in WordPress to pop the JavaScript into the pages I wanted to display the Image Comparison Slider.

Once in place, I added the HTML. You also need to make sure both images are the same size.

[wpcode id="1234"] - this inserts the JavaScript into the page.

<img-comparison-slider>
  <img slot="first" width="100%" src="URL-of-first-image.jpg">
  <img slot="second" width="100%" src="URL-of-second-image.jpg">
</img-comparison-slider>

That’s pretty much it, if you want the handle of the slider to look a little prettier, you can add this extra bit of code.

[wpcode id="1234"]

<img-comparison-slider>
  <img slot="first" width="100%" src="URL-of-first-image.jpg">
  <img slot="second" width="100%" src="URL-of-second-image.jpg">
  <svg slot="handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
    <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
  </svg>
</img-comparison-slider>

Last but not least you can add a little bit of CSS animation to your handle.

[wpcode id="1234"]

<img-comparison-slider class="animated-handle">
  <img slot="first" width="100%" src="URL-of-first-image.jpg">
  <img slot="second" width="100%" src="URL-of-second-image.jpg">
  <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
    <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
  </svg>
</img-comparison-slider>

This CSS code animates/changes the handle on hover

  .custom-animated-handle {
    transition: transform 0.2s;
  }

  .animated-handle:hover .custom-animated-handle {
    transform: scale(1.2);
  }