Repeat the animation in the setInterval()?

Question

After the animation of the images sliding finishes, it continues to slide right forever, I have tried a setTimeout to move the images back left so it restarts but then the setInterval animation stops. Is there a way to move the #slidewindow left 400% so that the slide can restart from the beginning again creating an infinite loop ?

Thank You very much for all contributions!!!

HTML:

<div id="slide-box">
        <div id="slidewindow">
            <div id="Img1">
                <img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
            </div>

            <div id="Img2">
                <img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
            </div>

            <div id="Img3">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
            </div>

            <div id="Img4">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
            </div>

            <div id="Img5">
                <img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
            </div>

        </div>
    </div>

CSS:

#slide-box{
    width: 80%;
    border: solid;
    border-color: white;
    border-width: 1rem;
    background-color: yellow;
    display: inline-block;
    overflow: hidden;

}

#slidewindow{
    float: left;
    width: 500%;
    margin: 0;
    position: relative;

}

.imgs{
    width: 20%;
    float: left;
    margin: 0 0 0 0;
}

JQUERY:

setInterval(function(){ 
        $('#slidewindow').animate({
            right:'+=100%',

            }, 1000);
    }, 2000);

Answer 1

Here is my version, its a more generic, please try to use this in your code!

var right = 0;
setInterval(function() {
  //determine the right position minus the width of one image. 
  right = parseInt($('#slidewindow').css("right")) + $('.imgs').width();
  //check if the right position has reach the end, i.e width of the slidewindow
  if (right === $('#slidewindow').width()) {
    //if the end is reached you can use the below line to directly send it to the first image.
    //$('#slidewindow').css("right", "0px");
    //or
    //if you want to animate the return to the first line, use the below JS
    $('#slidewindow').animate({
      right: '0'
    }, 1000);
  } else {
    //since we have not reached the end of the width, increase the slide
    $('#slidewindow').animate({
      right: '+=100%'
    }, 1000);
  }
  //on each interval, add the width of the slide that was moved to the right variable!
  right += parseInt($('#slidewindow').css("right"));
}, 2000);

#slide-box {
  width: 80%;
  border: solid;
  border-color: white;
  border-width: 1rem;
  background-color: yellow;
  display: inline-block;
  overflow: hidden;
}

#slidewindow {
  float: left;
  width: 500%;
  margin: 0;
  position: relative;
}

.imgs {
  width: 20%;
  float: left;
  margin: 0 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
  <div id="slidewindow">
    <div id="Img1">
      <img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
    </div>

    <div id="Img2">
      <img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
    </div>

    <div id="Img3">
      <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
    </div>

    <div id="Img4">
      <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
    </div>

    <div id="Img5">
      <img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
    </div>

  </div>
</div>

Answer 2

If you restore the animated right property after the animation, and then move the first image to the end of the list, you get an ever ongoing slide show:

setInterval(function(){
    $('#slidewindow').animate({
        right:'+=100%',
    }, 1000, function () { // Add this callback function
        // Reinject the first image at the end, and set "right" back to 0 
        $('#slidewindow').append($('#slidewindow>div:first')).css({ right: 0 });
    });
}, 2000);

#slide-box{
    width: 80%;
    border: solid;
    border-color: white;
    border-width: 1rem;
    background-color: yellow;
    display: inline-block;
    overflow: hidden;

}

#slidewindow{
    float: left;
    width: 500%;
    margin: 0;
    position: relative;

}

.imgs{
    width: 20%;
    float: left;
    margin: 0 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
        <div id="slidewindow">
            <div id="Img1">
                <img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
            </div>

            <div id="Img2">
                <img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
            </div>

            <div id="Img3">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
            </div>

            <div id="Img4">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
            </div>

            <div id="Img5">
                <img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
            </div>

        </div>
    </div>

Answer 3

You could use a global counter...

var counter = 0;
setInterval(function(){
    if(counter == 3)
    {
        $('#slidewindow').animate({
            right:'-=300%',
        }, 1000);
        counter = 0;
    }
    else
    {
        $('#slidewindow').animate({
            right:'+=100%',
        }, 1000);
        counter++;
    }
}, 2000);

#slide-box{
    width: 80%;
    border: solid;
    border-color: white;
    border-width: 1rem;
    background-color: yellow;
    display: inline-block;
    overflow: hidden;

}

#slidewindow{
    float: left;
    width: 500%;
    margin: 0;
    position: relative;

}

.imgs{
    width: 20%;
    float: left;
    margin: 0 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
        <div id="slidewindow">
            <div id="Img1">
                <img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
            </div>

            <div id="Img2">
                <img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
            </div>

            <div id="Img3">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
            </div>

            <div id="Img4">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
            </div>

            <div id="Img5">
                <img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
            </div>

        </div>
    </div>