как сделать слайдер с прокруткой пальцем

let slides = document.querySelectorAll('.slide'),
  dots = document.querySelectorAll('.dot'),
  track = document.querySelector('.slider-track');

let x = 0;

function slideLeft() {
  x -= 1;
  slide()
}

function slideRight() {
  x += 1;
  slide()
}

function slideDot (y) {
x = y;
slide();
}

function slide() {
  if (x < 0) {
    x = 4;
  }

  if (x > 4) {
    x = 0;
  }


  for (let i = 0; i < slides.length; i++) {
    if (i == x) {
      dots[i].classList.add('active');
      track.style.marginLeft = `-${i * 200}px`;
    } else {
      dots[i].classList.remove('active');
    }
  }
}

slide();

.slider-list {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
  cursor: grab;
}

.slider-track {
  display: flex;
  flex-shrink: 0;
  width: 1000px;
  height: 200px;
  transition: all .5s ease;
}

.slide {
  width: 200px;
  height: 200px;
  text-align: center;
  padding-top: 8%;
  font-size: 20px
}

.slider {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto 0;
}

.btns {
  display: flex;
  justify-content: space-between;
}

.dots {
  display: flex;
  justify-content: space-between;
  margin: 10px 0px;
  align-items: center;
}

.dot {
  border-radius: 50%;
  background: grey;
  width: 10px;
  height: 10px;
  transition: all .2s ease;
cursor: pointer;
}

.active {
  width: 20px;
  height: 20px;
  background: black;
}

<div class="slider">
  <div class="slider-list">
    <div class="slider-track" style="margin-left: 0px;">
      <div class="slide" style="background: red">1</div>
      <div class="slide" style="background: green">2</div>
      <div class="slide" style="background: blue">3</div>
      <div class="slide" style="background: white">4</div>
      <div class="slide" style="background: grey">5</div>
    </div>
  </div>
  <div class="dots">
    <div class="dot active" onclick="slideDot(0)"></div>
    <div class="dot" onclick="slideDot(1)"></div>
    <div class="dot" onclick="slideDot(2)"></div>
    <div class="dot" onclick="slideDot(3)"></div>
    <div class="dot" onclick="slideDot(4)"></div>
  </div>
  <div class="btns">
    <button class="l-btn" onclick="slideLeft()">&larr;</button>
    <button class="l-btn" onclick="slideRight()">&rarr;</button>
  </div>
</div>