There is a simple jQuery slider, But when i go out from the Chrome browser, and comes after some time then this slider change slides fastly to complete all pending moves when it was in state of non visible.
Now i want that this slider must be pause when i go out from visible state, and must be quick start when i come back to this.
means i think i need to setup a clearInterval(interval); function, that i read here : jQuery when element becomes visible
But i don't know what should i change in my code.
Plz give me answer.:
MY WHOLE CODE IS HERE:
$('#slider').each(function() {
let currentPosition = 0; //Set the starting position of the photo
let photo = $('.photo');
let photoNums = photo.length; //Number of photos
let speed = 400;
let timeout = 2000; // How long does each photo stay
$('.photo').eq(0).show();
function move(){
// Change the number of sheets displayed through the concept of remainder
let nextPhoto = (currentPosition + 1) % photoNums;
photo.eq(currentPosition).fadeOut(speed);
photo.eq(nextPhoto).fadeIn(speed);
currentPosition = nextPhoto;
}
setInterval(move,timeout);
}) #slider {
width: 600px;
height: 300px;
position: relative;
margin: auto;
}
img {
width: 100%;
}
.photo {
position: absolute;
display: none;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div id="slider">
<div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=1" alt=""></div>
<div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=2" alt=""></div>
<div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=3" alt=""></div>
<div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=4" alt=""></div>
</div>I think it's better to use setTimeOut instead of setInterval. And slow down the movement of each photo.
$('#slider').each(function() {
let currentPosition = 0; //Set the starting position of the photo
let photo = $('.photo');
let photoNums = photo.length; //Number of photos
let speed = 800;
let timeout = 2000; // How long does each photo stay
$('.photo').eq(0).show();
function move(){
// Change the number of sheets displayed through the concept of remainder
let nextPhoto = (currentPosition + 1) % photoNums;
photo.eq(currentPosition).fadeOut(speed);
photo.eq(nextPhoto).fadeIn(speed);
currentPosition = nextPhoto;
setTimeout(move,speed)
}
move()
})