I am currently working on an auto slide feature and could use some guidance with setInterval(). From my understanding, setInterval() is used to repeat functions infinitely, which is exactly what I need for this project. Here is the current layout:
HTML
<div id="container">
<div id="background_top" class="slide"></div>
<div id="slidephoto"></div>
</div>
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%;
}
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);
}
});
Although the code works as intended, I am looking to make this slide last indefinitely. I attempted to loop the animation by copying the existing code snippet and using setInterval(), but it did not yield the desired result:
$(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 am seeking a solution to prolong the duration of this slide animation endlessly.