Vanilla JavaScript Next & prev Navigation

Question

I traying to make testimonials slider with next & prev buttons, but unfortunately can't make it work perfectly. tried many things but there is something wrong with my code Need your help Note: I still learning Javascript.

Here is my code:

 let nextBtn = document.querySelector('.testi-nav.next'); let prevBtn = document.querySelector('.testi-nav.prev'); let testiBox = document.querySelectorAll('.testi-box') nextBtn.addEventListener('click', (e) => { testiBox.forEach(testi => { testi.nextElementSibling.style.display = 'block' testi.style.display = 'none'; }) }) prevBtn.addEventListener('click', (e) => { testiBox.forEach(testi => { testi.prevElementSibling.style.display = 'block'; testi.style.display = 'none'; }) })

 .testi-box { padding: 80px; background-color: #fff; overflow: hidden; box-shadow: 0px 0px 8px 2px rgba(196, 194, 196, 0.815); position: relative; display: none; }.testi-box:first-child { display: block; }

 <div class="testimonial"> <div class="testi-nav"> <span class="nav-button prev"><i class="fas fa-angle-left"></i></span> <span class="nav-button next"><i class="fas fa-angle-right"></i></span> </div> <div class="container"> <div class="testi-box"> <div class="testi-img"> <div class="person"> <img src="imgs/Testimonial/person/tmc (1).jpg" alt=""> </div> </div> <div class="testi-text"> <p>"Lorem ipsum"</p> <p class="person-name">UI/UX Designer <span>John David</span></p> </div> </div> <div class="testi-box"> <div class="testi-img"> <div class="person"> <img src="imgs/Testimonial/person/tmc (3).jpg" alt=""> </div> </div> <div class="testi-text"> <p>"Lorem ipsum"</p> <p class="person-name">UI/UX Designer <span>John David</span></p> </div> </div> <div class="testi-box"> <div class="testi-img"> <div class="person"> <img src="imgs/Testimonial/person/tmc (4).png" alt=""> </div> </div> <div class="testi-text"> <p>"Lorem ipsum"</p> <p class="person-name">UI/UX Designer <span>John David</span></p> </div> </div> </div> </div>

Answer 1

Might I suggest a different approach (this is an example not meant to directly mimic your code):

 //store your data as an array of objects const data = [ {name: "Name1", url: "url1"}, {name: "Name2", url: "url2"}, {name: "Name3", url: "url3"}, {name: "Name4", url: "url4"}, {name: "Name5", url: "url5"} ] //create an index variable let index = 0; //store your elements let img = document.getElementById("image"); let name = document.getElementById("name"); //create a render function that updates your elements with current index const render = () => { img.setAttribute("src",data[index].url); name.textContent = data[index].name; } //make prev on click that lowers index down to 0 const prev = () => { if(index > 0){ index -= 1; render(index); } } //make next on click that raises index up to last const next = () => { if(index < data.length -1){ index += 1; render(); } }

 <!-- only render one set of data --> <img src="url1" id="image" /> <div id="name"> Name1 </div> <button onclick="prev()">prev</button> <button onclick="next()">next</button>