If Statement Inside For Loop Doesn't Iterate Correctly (Slider Issue)

I am creating a fullscreen image slider but in order for my slider to work I need an if statement in it to reposition the images back across the slider if they cross the slider due to it moving.The problem is that the for loop waits until the end to do the if statement of all the images and they have all already crossed the screen.I want to check them individually ,but I don't know how. Thanks in advance! (The problem is labeled in Javascript code)

    // Slider

    $('.container').hover(function() {
       clearInterval(interval);
   }, function() {
       interval = setInterval(slider,15000);
   });

   function slider() {

     var slide1 = $('.slide1');
     var slide2 = $('.slide2');
     var slide3 = $('.slide3');
     var slide4 = $('.slide4');
     var arr = [slide1,slide2,slide3,slide4];

     while(true) {
       for (var i = 0;i <= arr.length;i++){

       // THIS WORKS

       // animate fullscreen images

         arr[i].animate({
           left:"-=100%"
         },500);
       }

       // THIS DOESN'T WORK

       // Check if image has crossed the screen

       // How do I get this to where it will check individually (after 1,after 2,etc..)?

       if (arr[i].position().left < 0){
         arr[i].css('left','300%');
       }
     }
   }

/* Container */

.wallpaper-container {
    overflow:hidden;
  width:500%;
    height:100%;
    margin-left:-100%;
}

/* images */

.slide1 {
    width:100%;
    height:100vh;
    position:absolute;
    top:0;
    left:0;
}

.slide2 {
    width:100%;
    height:100vh;
    position:absolute;
    top:0;
    left:100%;
}

.slide3 {
    width:100%;
    height:100vh;
    position:absolute;
    top:0;
    left:200%;
}

.slide4 {
    width:100%;
    height:100vh;
    position:absolute;
    top:0;
    left:300%;
}

<div class="wallpaper-container">
  <img src="http://ift.tt/2cCaTTH" class="slide1"/>
  <img src="http://ift.tt/2cCaTTH" class="slide2"/>
  <img src="http://ift.tt/2cCaTTH" class="slide3"/>
  <img src="http://ift.tt/2cCaTTH" class="slide4"/>
</div>