Overview
The latest released version of jQuery tools as of this writing (1.2.6) available here has a few issues with how it does both auto and circular scrolling.
In my particular case, I needed a scroller that I could configure to display N items in the viewport, autoscroll in a circular fashion, provide previous and next buttons and also be utilized as a News style Ticker. To accommodate this a few fixes and additions needed to be applied to the jQuery Tools scrollable source code – find my updated jQuery Tools source on Github available here.
For a working demo of both circular auto scrolling and news ticker click here
Example Html
The HTML
<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div id="scrollable">
<!-- root element for the items -->
<div class="items">
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"></a>The Javascript
<script> // execute your scripts when the DOM is ready. this is mostly a good habit $('#scrollable').scrollable({ //this value determines how many items are moved with each cycle size: 3, circular: true, speed: 400 }).navigator().autoscroll({ autoplay: true, autopause: true, interval: 3000 }); </script>
You can also turn this into into a circular ticker with a configuration like this:
<script> // execute your scripts when the DOM is ready. this is mostly a good habit $("#scrollable").scrollable({ easing: 'linear', size: 1, circular: true, speed: 3000 }).navigator().autoscroll({ autoplay: true, interval: 0 }); </script>