related to js image slider....Can anyone tell me why is it not working properly

Question

      const N = document.querySelector('.right')  

      const P = document.querySelector('.left')

      const slider = document.querySelector('.slider')

      //Number of images are 3
      //with to slider buttons

      let slideno = 1

      N.addEventListener('click', () => {

        if (slideno < 3) {

          slider.style.transform = `translateX(-${slideno * 785}px)`
          slideno += 1
        }
        else {
          slider.style.transform = `translateX(0px)`
          slideno = 1
        }
      })
      P.addEventListener('click', () => {
       
       if (slideno > 3) {
          slider.style.transform = `translateX(0px)`
          slideno = 1
        } else {
          slider.style.transform = `translateX(785px)`
          slideno--
        }
      })

In this program, it worked great, during the next slides but not in reverse movement can anyone guide me on what I'm doing wrong? And how can I fix it?

Answer 1

The reason why it is not working in the reverse movement is for the P element you have not added any event listener. In the below code I have added event listener for the P and it should work fine. Please try this code.

const N = document.querySelector('.right');
const P = document.querySelector('.left');
const slider = document.querySelector('.slider');
let slideno = 1;

N.addEventListener('click', () => {
  if (slideno < 3) {
    slideno++;
    slider.style.transform = `translateX(${-785 * (slideno - 1)}px)`;
  } else {
    slideno = 1;
    slider.style.transform = `translateX(0px)`;
  }
});

// Added this
P.addEventListener('click', () => {
  if (slideno > 1) {
    slideno--;
    slider.style.transform = `translateX(${-785 * (slideno - 1)}px)`;
  } else {
    slideno = 3;
    slider.style.transform = `translateX(-1570px)`;
  }
});