Mahmoud Santos
Published in : 2022-02-22

Vanilla JavaScript Next & prev Navigation

Javascript

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 > <div > <span ><i ></i></span> <span ><i ></i></span> </div> <div > <div > <div > <div > <img src="imgs/Testimonial/person/tmc (1).jpg" alt=""> </div> </div> <div > <p>"Lorem ipsum"</p> <p >UI/UX Designer <span>John David</span></p> </div> </div> <div > <div > <div > <img src="imgs/Testimonial/person/tmc (3).jpg" alt=""> </div> </div> <div > <p>"Lorem ipsum"</p> <p >UI/UX Designer <span>John David</span></p> </div> </div> <div > <div > <div > <img src="imgs/Testimonial/person/tmc (4).png" alt=""> </div> </div> <div > <p>"Lorem ipsum"</p> <p >UI/UX Designer <span>John David</span></p> </div> </div> </div> </div>

 

Comments

Yasen Sayed Date : 2022-02-22

Best answers

8

Best answers

8

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

 

//store your data as an array of objectsconst slider = [ {name: "Title01", url: "image_path"}, {name: "Title02", url: "image_path"}, {name: "Title03", url: "image_path"}, {name: "Title04", url: "image_path"},]//create an index variablelet index = 0; //store your elementslet img = document.getElementById("image");let title = document.getElementById("name"); //create a render function that updates your elements with current indexconst render = () => { img.setAttribute("src",slider[index].url); title.textContent = slider[index].title;}//make prev on click that lowers index down to 0const prev = () => { if(index > 0){ index -= 1; render(index); }}//make next on click that raises index up to lastconst 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 

 

 

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How select specific tag in jQuery using if else statement?
Publish date: 2022-02-27 | Comments: 1

Tag: Javascript

JavaScript variable for Changing CSS Height
Publish date: 2022-02-12 | Comments: 1

Tag: Javascript

Coping plain text into form bug.
Publish date: 2022-02-11 | Comments: 1

Tag: Javascript

Can I read a local json, image or text file from Javascript?
Publish date: 2022-03-03 | Comments: 1

Tag: Javascript

javascript: Uncaught TypeError: undefined is not a function
Publish date: 2022-03-02 | Comments: 2

Tag: Javascript

How to get audio input and audio output as one stream?
Publish date: 2022-02-13 | Comments: 2

Tag: Javascript

How to toggle ( show and hide ) divs according to day hours?
Publish date: 2022-02-13 | Comments: 1

Tag: Javascript