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?
You can not change the interval by that way. It repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. Updating the interval you have to clear and create new one with new delay time as the example below. But I think you might have to try to use the setTimeOut instead.
let current = 0,
delay = 5000, nIntervId = null;
const slides = document.querySelectorAll('.slide');
changeTheSlideItem = 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;
if(nIntervId){
clearInterval(nIntervId);
}
nIntervId = setInterval(changeTheSlideItem, delay);
}
nIntervId = setInterval(changeTheSlideItem, delay);
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>