setInterval – wait longer on first element for each loop

February 19, 2022

I have an image slideshow that I am doing using setInterval. I would like it to hold for 5s on the first item, and then 1s on the additional items each time it loops. Here’s what I tried:

let current = 0,
    delay = 5000;
    
const slides = document.querySelectorAll('.slide');
setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0;
    }
    current = (current != slides.length - 1) ? current + 1 : 0;
    console.log(current);
    if (current === 0) {
        delay = 5000;
    } else {
        delay = 1000;
    }
    slides[current].style.opacity = 1;
}, delay);

.slider {
  width:300px;
  height:150px;
}
  .slider img {
    position: absolute;
    transition: opacity .5s ease-in;
  }
    .slider img + img {
      opacity:0;
    }

<div class="slider">
  <img class="slide" src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" />
  <img class="slide" src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" />
</div>

This does not seem to work, I’m guessing because once the setInterval delay has been set, it cannot be changed. So how would I go about making it so that the first image shows for 5s, the next 3 show for 1s and then back to 5s on the first image?

>Solution :

You can use setTimeOut for that. I keep almost of your code so that you can understand.

let current = 0,
    delay = 5000;
    
const slides = document.querySelectorAll('.slide');
function showNextSlide() {
  for (var i = 0; i < slides.length; i++) {
      slides[i].style.opacity = 0;
  }

  slides[current].style.opacity = 1;
  if (current === 0) {
    delay = 5000;
  } else {
    delay = 1000;
  }
  
  current = (current != slides.length - 1) ? current + 1 : 0;
  setTimeout(showNextSlide, delay);
}


showNextSlide();

.slider {
  width:300px;
  height:150px;
}
  .slider img {
    position: absolute;
    transition: opacity .5s ease-in;
  }
    .slider img + img {
      opacity:0;
    }

<div class="slider">
  <img class="slide" src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" />
  <img class="slide" src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" />
</div>