Once the images finish sliding in the animation, they continue to slide right endlessly. I've attempted using a setTimeout function to move the images back left and restart the animation, but this causes the setInterval animation to stop. Is there a way to shift the #slidewindow left by 400% so that the slide can loop infinitely from the beginning?
Thank you for all your 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);