Testimonial Component Looping Interval Unexpected Behavior: JavaScript

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,

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

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.