jQuery Scrollable return to start once end is reached

Question

I'm attempting to get the newest jQuery Tools' Scrollable to return to the first item once the end is reached. I am currently showing 4 items horizontally, moving 1 item at a time with the next/previous buttons. There is a property called 'circular' but it doesn't take effect until the last item is in the only item showing. I need to stop the scrollable once the last item is reached, then scroll it to the first item.

I've tried a few things already such as:

jQuery(function() {
    // Initialize the Scrollable control
    jQuery(".scrollable").scrollable();
    // Get the Scrollable control
    var scrollable = jQuery(".scrollable").data("scrollable");
    // Set to the number of visible items
    var size = 4;

    // Handle the Scrollable control's onSeek event
    scrollable.onSeek(function(event, index) {
      // Check to see if we're at the end
      if (this.getIndex() >= this.getSize() - size) {
         // Disable the Next link
         jQuery("a.next").addClass("disabled");
       }
    });

   // Handle the Scrollable control's onBeforeSeek event
      scrollable.onBeforeSeek(function(event, index) {
      // Check to see if we're at the end
        if (this.getIndex() >= this.getSize() - size) {
        // Check to see if we're trying to move forward
          if (index > this.getIndex()) {
            // Cancel navigation
            scrollable.seekTo(0,1000);
          }
        }
      });
});

Again, the issue is that the circular isn't starting to trigger until there is 2 out of 4 empty items showing, then it will populate the other two, I was wondering if it was possible to make this smoother and never have an empty item showing.

[site removed]

Answer 1

issue fixed by reverting jQuery Tools to v1.2.5 from v1.2.7

I have used the following code to detect when it reaches the end, then to scroll to the beginning of the item list once the end is reached.

var $scroller = $('.scrollable').scrollable({onBeforeSeek:carousel}).autoscroll().data('scrollable');

$items = $('.scrollable .items div');
function carousel(e, idx) {
    // set this to 4 so it stops after 4 items
    if(idx > $scroller.getSize() - 4) {
        // return the beginning
        $scroller.seekTo(0).stop();
        // stop when we reach the end
        return false;
    }
}