I am using a javascript library scrollable.js for slideshow, in which i have 6 slides to be scrolled automaticaly but on page load i am displayed with the last slide first, then it scrolls to first slide for fraction of second and moves to second slide.. below is the code which makes this work:

> HTML code:

<div class="scrollable"> <div class="items"> <div><a class="fancyImage" id="protectslide" href="http://www.youtube.com/embed/EhyoS4o4_t4?rel=0"><img src="images/protect-slide.jpg"/></a> </div> <div><a href="http://www.mysecuredevice.com" target="_blank"><img src="images/viruses-slide.jpg"/></a></div> <div><a href="http://www.mysecuredevice.com" target="_blank"><img src="images/secure-slide.jpg"/></a></div> <div><a href="http://www.phoneclaim.com/walmart" target="_blank"><img src="images/splashes-slide.jpg"/></a></div> <div><a href="http://www.mysecuredevice.com" target="_blank"><img src="images/lost-slide.jpg"/></a></div> <div><a href="http://www.phoneclaim.com/walmart" target="_blank"><img src="images/spills-slide.jpg"/></a></div> </div> </div> <div class="navi"> </div>

scrollable call in javascript

$(document).ready(function(){ /*$(".scrollable").scrollable({circular: true, mousewheel: false}).navigator(".navi").autoscroll({ interval: 7000 });*/ $(".scrollable").scrollable({circular: true, easing:"swing"}).navigator(".navi").autoscroll(); $("#protectslide").click(function(){ var api = $(".scrollable").data("scrollable"); api.stop(); }); });

please refer above code for the expected and actual output I am talking about.

Any help will be appreciated.

Thanks