Hola, estoy tratando de crear un control deslizante del producto usando solo js y html, no se incluye la biblioteca y el siguiente código le mostrará un control deslizante que funciona, pero el problema es que solo muestra 1 elemento porque es un control deslizante del producto, debe tener al menos 3 o 4 elementos y moverse entre ellos o moverse y mostrar más de un elemento solo muestra un elemento y elimina el resto alguna idea de cómo puedo mejorar este control deslizante para mostrar más elementos o mover un elemento a la vez o agregarle un deslizamiento automático

 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(); }