I'm currently using an image slider and everything is working fine so far. When I click on the next or previous arrow, the images change accordingly. However, I also want the images to change automatically after a certain time interval. I've tried searching online for solutions but haven't been able to figure out how to implement this feature. Any help would be greatly appreciated.
Thank you in advance.
Here is the code snippet:
<div id="slideshow">
<ul class="slides">
<li class="sl"><img class="ss" src="image/a.png" width="191" height="278" alt="Splash Screen" /></li>
<li class="sl"><img class="ss" src="image/b.png" width="191" height="278" alt="Select Route" /></li>
<li class="sl"><img class="ss" src="image/c.png" width="191" height="278" alt="New Schedule" /></li>
<li class="sl"><img class="ss" src="image/d.png" width="191" height="278" alt="Created Routes" /></li>
<li class="sl"><img class="ss" src="image/e.png" width="191" height="278" alt="CR" /></li>
</ul>
<span class="arrow next"></span>
<span class="arrow previous"></span>
</div>
Here is the CSS:
#slideshow{
background:url(res/iphone_small.png) no-repeat;
height:512px;
margin:50px 25px auto;
position:relative;
width:257px;
}
#slideshow ul{
height:300px;
left:33px;
list-style:none outside none;
overflow:hidden;
position:absolute;
top:78px;
width:257px;
}
#slideshow li{
position:absolute;
display:none;
z-index:10;
}
#slideshow li:first-child{
display:block;
z-index:1000;
}
...
Below is the JavaScript file:
$(window).load(function(){
// Code here
});