I am trying to create a carousel with JavaScript for a WordPress website and i have made it work by showing 1 slide at a time with this code:

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

My question is how can i make the same carousel to constantly displays 3 slides and by pressing 'next' the first slide to become display="none" and the fourth to be display="block"?

And then, by pressing 'next' again, the second slide to become display="none" and the fifth to be display="block", then the third slide to become display="none" and the sixth to be display="block" e.t.c. until the end of the array?

Also to do it to go back with the 'prev' button?

I think its pretty simple, but i don't know how exactly to write the code... i am pretty new in coding..

Thank you