Vanilla JavaScript Next & prev Navigation

I trying to make a 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>

Yasen Sayed

22 Feb 2022

Best Answer

Hi Mahmoud, Please try this approach I hope can help you.

//store your data as an array of objects
const slider = [
 {name: "Title01", url: "image_path"},
 {name: "Title02", url: "image_path"},
 {name: "Title03", url: "image_path"},
 {name: "Title04", url: "image_path"},
]

//create an index variable
let index = 0; 

//store your elements
let img = document.getElementById("image");
let title = document.getElementById("name"); 

//create a render function that updates your elements with current index
const render = () => {
 img.setAttribute("src",slider[index].url);
 title.textContent = slider[index].title;
}

//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 < slider.length -1){
 index += 1;
 render();
 }
}

And this is the HTML Code.

<!-- only render one set of data -->
<img src="image_path" id="image" /> 
<div id="title"> Title01 </div>

<button onclick="prev()">prev</button>
<button onclick="next()">next</button>

Enjoy <3

Vanilla JavaScript Next & prev Navigation

Comments