before-after-plugin

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();