Before After js Plugin

Simple and Mobile Friendly Before After Slider

Comparison sliders are nothing new. There are even pure CSS implementations that is nothing but short of amazing. However, I wasn’t able to find a truly responsive one that was simple enough for our needs. This gave me the chance (and excuse) to build one myself that can be used anywhere.

DEPENDENCIES

• jQuery for ease

HTML STRUCTURE

  <div class="item">
     <div class="image-holder">
          <div class="item-before">
              <img src="https://cdn.shopify.com/s/files/1/2789/2114/files/Blonde-After.jpg?v=1682412968"
                  alt="blonde" class="image" draggable="false">
          </div>
          <div class="item-after">
              <img src="https://cdn.shopify.com/s/files/1/2789/2114/files/Blonde-before.jpg?v=1682412931"
                  alt="blonde" class="image" draggable="false">
          </div>
          <div class="item-scroller">
              <img src="https://cdn.shopify.com/s/files/1/2789/2114/files/Slider.png?v=1682414836"
                  alt="scroller" class="scroll-image">
          </div>
      </div>
  </div>
  

USAGE

$('.item').beforeAfter();