Hello im trying to build product slider using only js and html no library included and the following code will show you a slider working but the problem is its only showing 1 item because its a product slider it need to be at last 3 or 4 item and move between them or moving and showing more then one item its only showing one item and removes the rest any idea how can i improve this slider to show more items or move one item at time or adding some auto slide to it

let carouselPosition = 0;
  const carousels = document.getElementsByClassName('box');
  const totalCarousel = carousels.length;

  document.getElementById('next').addEventListener("click", function () {
    moveToNextCarousel();
  });
  document.getElementById('prev').addEventListener("click", function () {
    moveToPrevCarousel();
  });

  function updateSlidePosition() {
    for (let carousel of carousels) {
      carousel.classList.remove('item-visible');
      carousel.classList.add('item-hidden');
    }

    carousels[carouselPosition].classList.add('item-visible');
  }

  function moveToNextCarousel() {
    if (carouselPosition == totalCarousel - 1) {
      carouselPosition = 0;
    } else {
      carouselPosition++;
    }
    updateSlidePosition();
  }

  function moveToPrevCarousel() {
    if (carouselPosition == 0) {
      carouselPosition = totalCarousel - 1;
    } else {
      carouselPosition--;
    }
    updateSlidePosition();
  }