Testimonial Component Looping Interval Unexpected Behavior: JavaScript

[niteshthemerndev]

Hey Coding Enthusiasts!

I created a testimonial component using HTML, CSS, and Javascript but the logic is not working as per my expectations.

What I expected my code to do:

1. Is to loop through all the testimonial items and change the active testimonial item every 2 seconds.
2. If I click on the dot buttons then the testimonial carousel should start the looping interval from there.

What is actually happening: It is working fine for the first condition but I see that there’s some delay in the looping interval. And sometimes it completely skips the few items when I try to change the testimonial items using dot buttons.

Here’s the link to the project code - codepen

I hope to get your suggestion/solution on this.

Best Regards,
Nitesh

[jenovs]

When you’re clicking the dot you also need to update intervalIndex:

testimonialDots.forEach((dot, dotIndex1) => {
  dot.addEventListener('click', () => {
    highlightDot(dotIndex1);
    intervalIndex = dotIndex1 <--- add this line
    resetInterval();
  });
});