Bootcamp testimonial slider using HTML/CSS GRID AND VANILLA JAVASCRIPT

I Used position: absolute, opacity: 0 and opacity:1 to remove one of the slides then i used the prev and next button to toggle the classes with opacity to change the slides

section{
position:absolute;
}
.john {
  opacity: 0;
}
.john.move {
  opacity: 1;
}
.tanya.hide {
  opacity: 0;
}

JS

function controlBtns() {
  nextBtn.addEventListener("click", () => {
    tanya.classList.toggle("hide");
    john.classList.toggle("move");
  });
  prevBtn.addEventListener("click", () => {
    tanya.classList.toggle("hide");
    john.classList.toggle("move");
  });
}

• I feel like this only worked because there were two slides and may not if there are multiple slides

My question is what is a better way of creating slides like this one