Как исправить мой слайдер?

let pos = 0;
let track = document.querySelector('.slider-track');
let translatePercent = 33.33;

document.querySelector('.next').onclick = function() {

  if (document.documentElement.clientWidth > 600) {
    translatePercent = 33.33;
  } else {
    translatePercent = 100;
  }

  if (pos < document.querySelectorAll('.slide').length - 1) {
    pos++;
  }
  track.style.transform = 'translateX(' + pos * translatePercent * (-1) + '%)'
}

document.querySelector('.prev').onclick = function() {
  if (pos > 0) {
    pos--;
  }
  track.style.transform = 'translateX(' + pos * translatePercent * (-1) + '%)';
}

.slider {
  width: 600px;
  height: 400px;
  border: 1px solid silver;
  overflow: hidden;
}

.slider-track {
  min-width: 100%;
  display: flex;
  height: 100%;
  transition: .5s;
}

.slide {
  flex: 0 0 33.33%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-1 {
  background: #240;
}

.slide-2 {
  background: #840;
}

.slide-3 {
  background: #240;
}

.slide-4 {
  background: #d40;
}

.slide-5 {
  background: #75e;
}

.slide-6 {
  background: #25e;
}

@media (max-width: 600px) {
  .slide {
    flex: 0 0 100%;
  }
}

<div class="slider">
  <div class="slider-track">
    <div class="slide slide-1">1</div>
    <div class="slide slide-2">2</div>
    <div class="slide slide-3">3</div>
    <div class="slide slide-4">4</div>
    <div class="slide slide-5">5</div>
    <div class="slide slide-6">6</div>
  </div>
</div>
<button class="prev">Обратно</button>
<button class="next">Туда</button>