Image Reveal Slider

asi-image-reveal-script.js

$(document).ready(function()
    {
      $('.ba-slider').each(function()
      {
        var baCurr = $(this);
        var width = baCurr.width() + 'px';
        baCurr.find('.resize img').css('width', width);
        drags(baCurr.find('.handle'), baCurr.find('.resize'), baCurr);
      });

      $(window).resize(function()
      {
        $('.ba-slider').each(function()
        {
          var baCurr = $(this);
          var width = baCurr.width() + 'px';
          baCurr.find('.resize img').css('width', width);
        });
      });

      function drags(dragElement, resizeElement, container)
      {
        dragElement.on('mousedown touchstart', function(e)
        {

          dragElement.addClass('draggable');
          resizeElement.addClass('resizable');

          var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;

          var dragWidth = dragElement.outerWidth(),
            posX = dragElement.offset().left + dragWidth - startX,
            containerOffset = container.offset().left,
            containerWidth = container.outerWidth();

          minLeft = containerOffset + 10;
          maxLeft = containerOffset + containerWidth - dragWidth - 10;

          dragElement.parents().on("mousemove touchmove", function(e)
          {

            var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;

            leftValue = moveX + posX - dragWidth;

            if (minLeft > leftValue)
            {
              leftValue = minLeft;
            }
            else if (leftValue > maxLeft)
            {
              leftValue = maxLeft;
            }

            widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + '%';

            $('.ba-slider .draggable').css('left', widthValue).on('mouseup touchend touchcancel', function()
            {
              $(this).removeClass('draggable');
              resizeElement.removeClass('resizable');
            });

            $('.ba-slider .resizable').css('width', widthValue);

          }).on('mouseup touchend touchcancel', function()
          {
            dragElement.removeClass('draggable');
            resizeElement.removeClass('resizable');
          });

          e.preventDefault();

        }).on('mouseup touchend touchcancel', function(e)
        {
          dragElement.removeClass('draggable');
          resizeElement.removeClass('resizable');
        });
      }
    });

asi-image-reveal-slider.html

<!-- ASI IMAGE REVEAL WIDGET SCRIPT !-->
  <section class="asi-section asi-image-reveal" data-component-name="asiImageRevealSlider" style="padding-bottom:0px !important;">
    <div class="custom-page-maxwidth">
      <div class="ba-slider">
        <a href="/make-it-you" onclick="gtag('event', 'homepage',{'event_category':'user_engagement','event_action':'click','event_label':'HP Make It You Image','value':1});">
          <picture>
            <source media="(min-width: 769px)" srcset="https://asf.scene7.com/is/image/ASF/D_Plush-Slider_Red-08WK1Y19?fmt=pjpeg&pscan=5&resMode=sharp2&qlt=75,1"> <img alt="image alt" src="https://asf.scene7.com/is/image/ASF/M_Plush-Slider_Red-08WK1Y19?fmt=pjpeg&pscan=5&resMode=sharp2&qlt=75,1"> </picture>
        </a>
        <div class="resize">
          <a href="/make-it-you" onclick="gtag('event', 'homepage',{'event_category':'user_engagement','event_action':'click','event_label':'HP Make It You Image','value':1});">
            <picture>
              <source media="(min-width: 769px)" srcset="https://asf.scene7.com/is/image/ASF/D_Plush-Slider_Ivory-08WK1Y19?fmt=pjpeg&pscan=5&resMode=sharp2&qlt=75,1"> <img alt="image alt" src="https://asf.scene7.com/is/image/ASF/M_Plush-Slider_Ivory-08WK1Y19?fmt=pjpeg&pscan=5&resMode=sharp2&qlt=75,1"> </picture>
          </a>
        </div>
        <span class="handle"></span></div>
    </div>
  </section>
  <section class="asi-section" style="padding-top:0;margin-top:0;">
    <div class="asi-container-fluid hidden-sm hidden-md hidden-lg visible-xs">
      <div class="asi-content--banner-msg" style="background:#F0F0F0;padding:24px 0 32px;width:100%;position:relative;display:block;text-align:center;margin:0 auto;">
        <div style="position:relative;display:block;margin:0 auto;padding:0;text-align:center;">
          <a href="/product/collection/living-room/collections/plush-living-room-collection/2022426" onclick="gtag('event', 'homepage',{'event_category':'user_engagement','event_action':'click','event_label':'HP Plush Collection','value':1});" style="display: flex; text-decoration: none;justify-content:center;align-items:center;"> <img class="img-responsive lazyload" style="max-width:48px !important;width:48px !important;height:48px;" src="https://content.valuecityfurniture.com/images/svg/logos/designer-looks-logo--dark_v1.svg"> <span class="asi-gray-4 asi-ko-29 asi-feature-collection_prod text-uppercase">plush</span> </a>
        </div>
        <span class="asi-content--banner-msg__title center-block text-center text-uppercase asi-gray-4 asi-pxn-m" style="letter-spacing:3px;font-size:24px;padding-top:12px;">make it you</span>

        <p class="asi-content--banner-msg__body asi-gray-4 text-center asi-pxn-l" style="padding:8px 16px 24px;font-size:16px;line-height:1.3;">Get exactly what you want
          <br>available in 40 fabric and color options.</p>
        <div class="asi-content-button" style="text-align:center;margin:0 auto;">
          <a href="/make-it-you" onclick="gtag('event', 'homepage',{'event_category':'user_engagement','event_action':'click','event_label':'HP Make It You Btn','value':1});" target="_self">
            <button class="asi-mix-button asi-gray-4-bg asi-white">shop make it you</button>
          </a>
        </div>
      </div>
    </div>
  </section>

asi-image-reveal-styles.css

/* *** IMAGE REVEAL WIDGET STYLES *** */
    
    .ba-slider {
      position: relative;
      overflow: hidden;
    }
    
    .ba-slider img {
      width: 100%;
      display: block;
    }
    
    .ba-slider .resize {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 50%;
      overflow: hidden;
    }
    
    .ba-slider .handle {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 4px;
      margin-left: -2px;
      background: rgba(0, 0, 0, 0.5);
      baCurrsor: ew-resize;
    }
    
    .ba-slider .handle:after {
      position: absolute;
      top: 50%;
      width: 64px;
      height: 64px;
      margin: -32px 0 0 -32px;
      content: '\f07e';
      color: #414141;
      font-weight: bold;
      font-size: 36px;
      text-align: center;
      font-family: 'FontAwesome', 'FONTAWESOME', sans-serif;
      line-height: 64px;
      background: #f0f0f0;
      border: 1px solid #414141;
      border-radius: 50%;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 60px 50px -30px #f0f0f0;
    }
    
    .ba-slider .draggable:after {
      width: 48px;
      height: 48px;
      margin: -24px 0 0 -24px;
      line-height: 48px;
      font-size: 30px;
    }
    /* old */
    
    .img-comp-container {
      position: relative;
      height: 640px;
      /*should be the same height as the images*/
    }
    
    .img-comp-img {
      position: absolute;
      width: auto;
      height: auto;
      overflow: hidden;
    }
    
    .img-comp-img img {
      display: block;
      vertical-align: middle;
    }
    
    .img-comp-slider {
      position: absolute;
      z-index: 9;
      cursor: ew-resize;
      /*set the appearance of the slider:*/
      width: 40px;
      height: 40px;
      background-color: #f0f0f0;
      background-image: url('https://asf.scene7.com/is/image/ASF/asi-image-comparison-slider-button?fmt=png-alpha&wid=40&hei=40');
      opacity: 1;
      border-radius: 50%;
    }