Нужно заменить querySelector на querySelectorAll в ползунке

> sorry for my english)

В двух словах: нужно заменить querySelector на querySelectorAll и сохранить функциональность в слайдере (const sliderItems)

Привет всем, у меня есть ползунок, и он работает нормально, но только если я использую querySelector. Для дальнейших манипуляций мне нужно выбрать все элементы (querySelectorAll). Казалось бы, ничего страшного, но ползунок перестает работать, когда я использую querySelectorAll. Прошу помощи, так как понятия не имею, как это исправить, без потери функционала :)

JavaScript:

const slider = document.querySelectorAll('.slider'),
      sliderItems = document.querySelector('.slider__items'), 
      prev = document.querySelectorAll('.prev'),
      next = document.querySelectorAll('.next');

function slide(wrapper, items, prev, next) {
  let posInitial,
      slides = items.querySelectorAll('.slider__items *'),
      slidesLength = slides.length,
      slideSize = items.querySelectorAll('.slider__items *')[0].offsetWidth,
      firstSlide = slides[0],
      lastSlide = slides[slidesLength - 1],
      cloneFirst = firstSlide.cloneNode(true),
      cloneLast = lastSlide.cloneNode(true),
      index = 0,
      allowShift = true;

  //Set offset to first slide
  const slideWidth =  window.getComputedStyle(firstSlide);
        console.info(slideWidth.width);
        items.style.left = `-${slideWidth.width}`;
  
  // Clone first and last slide
  items.appendChild(cloneFirst);
  items.insertBefore(cloneLast, firstSlide);
  wrapper.forEach(item => {
    item.classList.add('loaded');
  });

  // Click events
  prev.forEach(item => {
    item.addEventListener('click', function () { shiftSlide(-1) });
  })
  next.forEach(item => {
    item.addEventListener('click', function () { shiftSlide(1) });
  })

  // Transition events
  items.addEventListener('transitionend', checkIndex);

  function shiftSlide(dir, action) {
    items.classList.add('shifting');
    
    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

      if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;     
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;  
      }
    };
    
    allowShift = false;
  }
    
  function checkIndex (){
    items.classList.remove('shifting');

    if (index == -1) {
      items.style.left = -(slidesLength * slideSize) + "px";
      index = slidesLength - 1;
    }

    if (index == slidesLength) {
      items.style.left = -(1 * slideSize) + "px";
      index = 0;
    }
    allowShift = true;
  }
}

slide(slider, sliderItems, prev, next);

HTML:

<div class = "slider">
  <div class = "slider__wrapper">
    <div class = "slider__items">
      <span class = "slider__slide">Slide 1</span>
      <span class = "slider__slide">Slide 2</span>
      <span class = "slider__slide">Slide 3</span>
      <span class = "slider__slide">Slide 4</span>
      <span class = "slider__slide">Slide 5</span>
      <span class = "vertical slider__slide vertical">Slide 6</span>
    </div>
  </div>
  
  <a id = "prev" class = "control prev"></a>
  <a id = "next" class = "control next"></a>
</div>

CSS:

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.slider__wrapper {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  z-index: 1;
}

.slider__items {
  display: flex;
  position: absolute;
}

.slider__items.shifting {
  transition: left 0.2s ease-out;
}

.slider__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 400px;
  cursor: pointer;
  transition: all 1s;
  background: #FFCF47;
  border-radius: 2px;
}

.slider.loaded .slider__slide:nth-child(2),
.slider.loaded .slider__slide:nth-child(7) {
  background: #FFCF47;
}
.slider.loaded .slider__slide:nth-child(1),
.slider.loaded .slider__slide:nth-child(6) {
  background: #7ADCEF;
}
.slider.loaded .slider__slide:nth-child(3) {
  background: #3CFF96;
}
.slider.loaded .slider__slide:nth-child(4) {
  background: #a78df5;
}
.slider.loaded .slider__slide:nth-child(5) {
  background: #ff8686;
}

.control {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50px;
  margin-top: -20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.prev,
.next {
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.prev {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
  left: -20px;
}

.next {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
  right: -20px;
}

.prev:active,
.next:active {
  transform: scale(0.8);
}

Пробовал сам заменить querySelector на querySelectorAll, но потом выдал кучу ошибок и скрипт не сработал :)