Having problem with image slider navigation

[adefesoq]

Hi everyone, I’m working on an image slider that allows you slide through some images using the previous/next button and also the navigation dots.

The issue is when I clicked on a navigation dot to get to a particular slide, I also want to make the dot active… But I haven’t been able to figure that out yet.

The codepen link is below:
Codepen

[m_hutley]

your click listener isn’t changing the value of counter.

As soon as i add a mechanism to change counter to the correct value, your code works.

[adefesoq]

@m_hutley

your click listener isn’t changing the value of counter .

As soon as i add a mechanism to change counter to the correct value, your code works.

@m_hutley I added
counter++
setActiveClass(counter)
To the click listener but it didn’t still solve my problem still. Pls help!

[PaulOB]

I think you just need to set counter to the value of index here before you call slideImage(index).

const allDots = navDots.querySelectorAll(".nav-dot");
  allDots.forEach((dot, index) => {
    dot.addEventListener("click", (e) => {
      dot.classList.remove('active')
      e.target.classList.add('active')
      counter = index;
      slideImage(index);
    });
  });

[edit]
Sorry that’s not right ignore the above

Try this instead:

const allDots = navDots.querySelectorAll(".nav-dot");
  allDots.forEach((dot, index) => {
    dot.addEventListener("click", (e) => {
      //dot.classList.remove('active')
      //e.target.classList.add('active')
       counter = index;
      slideImage(index);
    });
  });

I should have left it to the experts

[m_hutley]

works for me, Paul!

[adefesoq]

@PaulOB

const allDots = navDots.querySelectorAll(".nav-dot");
  allDots.forEach((dot, index) => {
    dot.addEventListener("click", (e) => {
      //dot.classList.remove('active')
      //e.target.classList.add('active')
       counter = index;
      slideImage(index);
    });
  });

It worked… But one question, why didn’t we pass counter to the slideImage
SlideImage(counter) since counter has been reassigned to the index values.

They both work tho

[m_hutley]

@adefesoq

SlideImage(counter) since counter has been reassigned to the index values.

you could. At that point, they’re equivalent statements. The important thing was to get the global counter variable set, because that way all of your functions (left arrow, right arrow, etc) know that you’re on slide #3 now, instead of slide #1.

[adefesoq]

@m_hutley

you could. At that point, they’re equivalent statements. The important thing was to get the global counter variable set, because that way all of your functions (left arrow, right arrow, etc) know that you’re on slide #3 now, instead of slide #1.

Understood, thanks