How to stop changing slides in this jQuery simple slider when it's not visible state

Question

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>

score 0 · Answer 1 · answered Oct 30 '21 at 20:03

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()
})

How to stop changing slides in this jQuery simple slider when it's not visible state

1 Answers1