user image

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 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 

 

 

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

Simple HTML date picker is showing not showing calendar icon!
Publish date: 2022-03-01 | Comments: 2

Tag: Javascript

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

Tag: Javascript

Javascript: Filtering arrays by it properties?
Publish date: 2022-03-05 | Comments: 1

Tag: Javascript

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

Tag: Javascript

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

Tag: Javascript

How to move a div with its content to TinyMEC editor?
Publish date: 2022-02-11 | Comments: 0

Tag: Javascript