Слайдерный параллакс

let active = false; 
 
document.querySelector('.scroller').addEventListener('mousedown', function() { 
  active = true; 
  document.querySelector('.scroller').classList.add('scrolling'); 
}); 
 
document.body.addEventListener('mouseup', function() { 
  active = false; 
  document.querySelector('.scroller').classList.remove('scrolling'); 
}); 
document.body.addEventListener('mouseleave', function() { 
  active = false; 
  document.querySelector('.scroller').classList.remove('scrolling'); 
}); 
 
document.body.addEventListener('mousemove', function(e) { 
  if (!active) return; 
  let x = e.pageX; 
  x -= document.querySelector('.wrapper').getBoundingClientRect().left; 
  scrollIt(x); 
}); 
 
function scrollIt(x) { 
  let transform = Math.max(0, (Math.min(x, document.querySelector('.wrapper').offsetWidth))); 
  document.querySelector('.after').style.width = transform + "px"; 
  document.querySelector('.scroller').style.left = transform - 25 + "px"; 
} 
 
scrollIt(150); 
 
document.querySelector('.scroller').addEventListener('touchstart', function() { 
  active = true; 
  document.querySelector('.scroller').classList.add('scrolling'); 
}); 
document.body.addEventListener('touchend', function() { 
  active = false; 
  document.querySelector('.scroller').classList.remove('scrolling'); 
}); 
document.body.addEventListener('touchcancel', function() { 
  active = false; 
  document.querySelector('.scroller').classList.remove('scrolling'); 
});

#page { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
} 
 
* { 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.wrapper { 
  width: 900px; 
  height: 600px; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate3d(-50%, -50%, 0); 
  overflow: hidden; 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 
} 
 
.before, 
.after { 
  width: 100%; 
  height: 100%; 
  background-repeat: no-repeat; 
  background-color: white; 
  background-size: cover; 
  background-position: center; 
  position: absolute; 
  top: 0; 
  left: 0; 
  pointer-events: none; 
  overflow: hidden; 
} 
 
.content-image { 
  height: 100%; 
} 
 
.after { 
  width: 125px; 
} 
 
.scroller { 
  width: 50px; 
  height: 50px; 
  position: absolute; 
  left: 100px; 
  top: 50%; 
  transform: translateY(-50%); 
  border-radius: 50%; 
  background-color: transparent; 
  opacity: 0.9; 
  pointer-events: auto; 
  cursor: pointer; 
} 
 
.scroller:hover { 
  opacity: 1; 
} 
 
.scrolling { 
  pointer-events: none; 
  opacity: 1; 
  // z-index: 1; 
} 
 
.scroller__thumb { 
  width: 100%; 
  height: 100%; 
  padding: 5px; 
} 
 
.scroller:before, 
.scroller:after { 
  content: " "; 
  display: block; 
  width: 7px; 
  height: 9999px; 
  position: absolute; 
  left: 50%; 
  margin-left: -3.5px; 
  z-index: 30; 
  transition: 0.1s; 
} 
 
.scroller:before { 
  top: 100%; 
} 
 
.scroller:after { 
  bottom: 100%; 
} 
 
.scroller { 
  border: 5px solid #fff; 
} 
 
.scroller:before, 
.scroller:after { 
  background: #fff; 
}

<div id="page"> 
  <div class="wrapper"> 
    <div class="before"> 
      <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false" /> </div> 
    <div class="after"> 
      <img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false" /> 
    </div> 
    <div class="scroller"> 
      <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg> 
    </div> 
  </div> 
</div>