Estoy tratando de crear un carrusel con JavaScript para un sitio web de WordPress y lo he hecho funcionar mostrando 1 diapositiva a la vez con este código:

 const slides = document.querySelectorAll(".slider-slide"); const prev = document.querySelector(".slider-arrows-left"); const next = document.querySelector(".slider-arrows-right"); let slideIndex = 0; showSlide(slideIndex); function showSlide() { if (slideIndex > slides.length - 1) { slideIndex = 0; } if (slideIndex < 0) { slideIndex = slides.length - 1; } let i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex].style.display = "block"; } next.addEventListener("click", () => { showSlide((slideIndex += 1)); }); prev.addEventListener("click", () => { showSlide((slideIndex -= 1)); });

Mi pregunta es ¿cómo puedo hacer que el mismo carrusel muestre constantemente 3 diapositivas y presionando 'siguiente', la primera diapositiva se convierta en display="none" y la cuarta en display="block"?

Y luego, presionando 'siguiente' nuevamente, la segunda diapositiva se convierte en display="none" y la quinta en display="block", luego la tercera diapositiva se convierte en display="none" y la sexta en display=" block", etc. hasta el final de la matriz?

¿También hacerlo para volver con el botón 'anterior'?

Creo que es bastante simple, pero no sé exactamente cómo escribir el código... soy bastante nuevo en la codificación...

Gracias