Перемещение по слайдеру с помощью лкм и drag

var start = 0;
var slid = document.getElementById("slider");
var sdvig = window.innerWidth;
var position = 0;

slid.addEventListener("dragstart",drag_start,false);
slid.addEventListener("dragend",drag_stop,false);
slid.addEventListener("drag",drag,false);

function drag_start(e){
  start = e.screenX;
}
function drag(e){
  let p = position - (start - e.screenX);
  slid.style.left = p + "px";
}
function drag_stop(e){
  if(start > e.screenX){
    if(position>-sdvig*2) position -= sdvig;
    slid.style.left = position + "px";
  }else{
    if(position<0) position += sdvig;
    slid.style.left = position + "px";
  }
}

div{
    width: 100vw;
    height: 100vh;
}
#vidimo{
   width: 100vw;
   height: 100vh;
   overflow:hidden;
   position: relative;
}
#slider{
  position: absolute;
  left: 0px;
  width: 300%;
  height: 100wh;
  display: flex;
  flex-direction: row;
}
#d1{
  background: red;
}
#d2{
  background: blue;
}
#d3{
  background: green;
}

<div id="vidimo">
  <div id="slider"> 
    <div id="d1" draggable="true"></div>
    <div id="d2" draggable="true"></div>
    <div id="d3" draggable="true"></div>
  </div>
</div>