Image and slider dot is out of sync

I just recently completed the basics of HTML, CSS, and Javascript. Now, I am trying to clone the home page of this website: https://www.startech.com.bd/. But I have run into a small problem. The webpage has an image slider, where the image changes every 5 seconds, and there are also three dots representing those three images, respectively.

Here is my code -

const imageResponsive = document.querySelectorAll('[data-image-responsive]');
const dot = document.querySelectorAll('[data-dot]');


let counter = 0;



function changeImage() {

  // First hide all images
  imageResponsive.forEach(img => img.style.display = 'none');

  // Show the current image based on the counter value
  imageResponsive[counter].style.display = 'block';

  // First hide all slider dots
  dot.forEach((span) => {
    span.style.background = '#fff';
    span.style.opacity = '0.5';
  });
  // Show the current slider dot based on the counter value
  dot[counter].style.background = '#ef4a23';
  dot[counter].style.opacity = '1';

  // Increment counter and reset if it exceeds the length of the image array
  counter = (counter + 1) % imageResponsive.length;


}



// Start the image change every 5 seconds
setInterval(changeImage, 5000);


// Initially display the first image and the slider dot
imageResponsive[0].style.display = 'block';
dot[0].style.background = '#ef4a23';
dot[0].style.opacity = '1';

.image-responsive-div {
  position: relative;
  width: 990px;
  height: 490px;
  padding: 0px 15px;
}

.image-responsive {
  width: 960px;
  height: 488px;
  position: absolute;
  box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.3);
}

.slider-dot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px 0;
}

.dot {
  display: inline-block;
  width: 30px;
  height: 8px;
  background: #fff;
  margin: 0 5px;
  opacity: .5;
  cursor: pointer;
}

<div class="image-responsive-div">
  <img class="image-responsive" data-image-responsive src="./resources/images/09-09-24a-v4-(antec-C8-offer-web-banner-design)-982x500.jpg" />
  <img class="image-responsive" data-image-responsive src="./resources/images/express-delivery-girl-receiving-parcel-home-banner-982x500.webp" />
  <img class="image-responsive" data-image-responsive src="./resources/images/queue-banner-home-service-982x500.png" />

  <div class="slider-dot">
    <span class="dot" data-dot></span>
    <span class="dot" data-dot></span>
    <span class="dot" data-dot></span>
  </div>
</div>

But the problem is with the slider. When the website loads, the first image and the first slider load up correctly, but then, when the second image comes, the slider still stays in first place. And when the third image comes, the slider moves to second place. Why is that?

I also tried asking Chatgpt but still did not understand what it said. Anyway, here is its answer: " The issue is happening because your counter is incremented after the images and dots are updated. This causes a delay in the slider dot movement. On the first run, the first image and first dot are shown correctly, but when the counter increments after updating the image for the second time, the dot update is out of sync with the image."

So, can someone explain why the slider and the image are out of sync during the 2nd run?

Solution

I believe your images and slider dots are in sync, the problem is just that you show all images at once before the timer is ran for the first time.

When they all stack on top of each other the last one will be on top.

I think what you are seeing is:

3rd image + 1st dot
2nd image + 2nd dot
3rd image + 3rd dot
1st image + 1st dot