jQuery Tools Scrollable: 3 Items on screen but scroll one at a time

Question

I am using jQuery Tools scrollable for a carousel with three items in view at a time and scrolling one single item in an autoscrolling and circular fashion.

I have used CSS to show the three items. This works ok until the carousel reaches the last item, it seems to wait until it has gone past it to load in the following items.

It also seems to wait until the middle item is fully in view before displaying the last item.

Demo here: http://jsfiddle.net/pgxSm/6/

Is there anything I can do about this?

Answer 1

Yes you can. I've had that very same problem.

1. The element that contains the items needs to have a very large width. Try adding CSS like this:

   .items {
       width: 20000em;
   }
   

   Actually this is one of the requirements to make jQuery Tools Scrollable work properly, as stated on the developer's demo page. This way all items can be displayed in one row to that there is no space visible after the last item while scrolling. It doesn't matter if it's larger than needed, as long as it is never too small.

2. jQuery Tools Scrollable is actually built to only display one item at a time. This means you have to change the code of the script:

   You can find the non-minified script here. Search for the line in the Scrollable script that says

   cloned2 = self.getItems().eq(1).clone().appendTo(itemWrap);
   

   Replace it with this line:

   cloned2 = self.getItems().slice(1,4).clone().appendTo(itemWrap);
   

   This way you clone the first 3 items (instead of only the first item) and add it to the end of the items, so that circular scrolling is possible even though more than one items are visible at a time. If you want more items to be visible at a time, just replace 4 with [number of visible items] + 1. Afaik, there's no other way to make jQuery tools work with multiple items being visible at a time. I also use this solution at work.

   If you want to get the minified version of the script again, after your changes, simply use this minifier. It works like a charm. :)

If this was what you were looking for, please consider marking it as the correct answer. Thank you!

Answer 2

The above answer is technically correct, however, if you're downloading it in a bundle from the jQuerytools site, it is worded slightly differently.

The line you might be looking for instead is:

l = f.getItems().eq(1).clone().appendTo(h);

Which should change, in a similar way to the above answer, to this:

l = f.getItems().slice(1,4).clone().appendTo(h);

Not fully tested, use at your own risk.

Answer 3

If you'd like to make it configurable, just add

circularVisibleItems:1

into conf object and then change

l=f.getItems().eq(1).clone().appendTo(h);

into

l=e.circularVisibleItems>1?f.getItems().slice(1,e.circularVisibleItems+1).clone().appendTo(h):f.getItems().eq(1).clone().appendTo(h);

Than you can define how many items have to be cloned in which slider.