Skip to content


jQuery Tools Scrollable – Scroll multiple items with circular looping, News Ticker

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>

Posted in jQuery Plugins & Framework.

One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Kate said

    Thanks, this was very helpful.

Some HTML is OK

(required)

(required, but never shared)

or, reply to this post via trackback.