(function($){
$(function(){
  $('.before-wrapper').on("mousemove touchmove", function(e) {
    var offsets = $(this).offset();
    var fullWidth = $(this).width();
    var touch = e.originalEvent.touches;

    if (touch) var pointX = touch[0].pageX - offsets.left;
    else pointX = e.pageX - offsets.left;

    if (pointX < 0) { pointX = 0; }
    else if (pointX > fullWidth) { pointX = fullWidth }

    $(this).parent().find('.comparison-slider').css({
      left: pointX,
      transition: 'none'
    });
    $(this).find('.after-wrapper').css({
      transform: 'translateX(' + (pointX) + 'px)',
      transition: 'none'
    });
    $(this).find('.after-image').css({
      transform: 'translateX(' + (-1*pointX) + 'px)',
      transition: 'none'
    });
  });

  $('.slider-wrapper').on("mouseleave touchend", function() {
    $(this).parent().find('.comparison-slider').css({
      left: '50%',
      transition: 'all .3s'
    });
    $(this).find('.after-wrapper').css({
      transform: 'translateX(50%)',
      transition: 'all .3s'
    });
    $(this).find('.after-image').css({
      transform: 'translateX(-50%)',
      transition: 'all .3s'
    });
  });

});
})(jQuery);