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]
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;
}
}