How to use setInterval() properly? - jQuery

Question

I'm working on some kind of auto slide and I need some help on setInterval(). As far as I know, setInterval() makes functions repeat infinitely so I think setInterval() is what I need. Here is what I am working on:

HTML

<div id="container">
<div id="background_top" class="slide"></div>
<div id="slidephoto"></div>
</div>

Here is CSS

#container {
position:absolute;
width:100%;
height:618px;
overflow:hidden;
}
#background_top {
position:absolute;
background-image:url(images/basvurubg.jpg);
background-size:100%;
background-repeat:no-repeat;
width:100%;
height:618px;
z-index:0;
margin-left:100%;
}
#slidephoto {
position:absolute;
background-image:url(images/bgtop2.jpg);
background-size:100%;
background-repeat:no-repeat;
width:100%;
height:618px;
z-index:-1;
left:0%;
}

and jQuery

$('.slide').delay(5000).load("index.html", function() {
$('.slide').each( function() {
    if ($(this).offset().left < 0) {
        $(this).css("left", "150%");
    }
});
$(this).animate({
     left: '-100%'
 }, 500);
 $(this).delay(5000).animate({
     left: '100%'
 }, 550);
 $(this).delay(5000).animate({
     left: '-100%'
 }, 500);
 $(this).delay(5000).animate({
     left: '100%'
 }, 550);

 if ($(this).next().size() > 0) {
     $(this).next().animate({
         left: '0%'
     }, 500);
 } else {
     $(this).prevAll().last().animate({
         left: '0%'
     }, 500);
 }
});

The code is working properly and just like what I want. But I want this slide to last forever. And I don't know what to do about it. I tried to repeat the animation I want by copying the code on this part. And then I removed the last two (this) part and tried to add setInterval() but did not work:

$(this).animate({
 left: '-100%'
 }, 500);
$(this).delay(5000).animate({
 left: '100%'
}, 550);
$(this).delay(5000).animate({
  left: '-100%'
}, 500);
$(this).delay(5000).animate({
 left: '100%'
}, 550);

I need this slide animation to last forever.

Answer 1

I have two solution here:

Option 1 (use setInterval ):

 $('.slide').delay(500).load("index.html", function() { var _this = $(this); loop(_this); }); function loop(thisone) { var _this = thisone; setInterval(function() { _this.animate({ left: '-100%' }, 1000); _this.delay(1000).animate({ left: '100%' }, 1000); }, 3000); } 

 #container { position: absolute; width: 100%; height: 618px; overflow: hidden; } #background_top { position: absolute; background-image: url(http://placehold.it/200x100); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 618px; z-index: 0; margin-left: 100%; } #slidephoto { position: absolute; background-image: url(http://placehold.it/350x200); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 618px; z-index: -1; left: 0%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="background_top" class="slide"></div> <div id="slidephoto"></div> </div> 

Option 2 (use setTimeout ):

 $('.slide').delay(500).load("index.html", function() { var _this = $(this); loop(_this); }); function loop(thisone) { var _this = thisone; _this.animate({ left: '-100%' }, 1000); _this.delay(1000).animate({ left: '100%' }, 1000); setTimeout(function() { loop(thisone); }, 3000); } 

 #container { position: absolute; width: 100%; height: 618px; overflow: hidden; } #background_top { position: absolute; background-image: url(http://placehold.it/600x600); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 618px; z-index: 0; margin-left: 100%; } #slidephoto { position: absolute; background-image: url(http://placehold.it/750x750); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 618px; z-index: -1; left: 0%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="background_top" class="slide"></div> <div id="slidephoto"></div> </div>