Not sure if anyone is still trying to do this, but I've solved it. My change below allows you to have multiple scrollable items visible in circular fashion:
my html:
<div class="scrollable">
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
my css:
.scrollable {
position: relative;
overflow: hidden;
height: 300px;
width: 600px;
}
.scrollable .items {
position: absolute;
height: 20000em;
}
.item {
color: white;
height: 100px;
width: 300px;
background: blue;
text-align: center;
}
http://screencast.com/t/CgcwIcgU5S
Github changes:
http://github.com/sprynmr/jquerytools/commit/7e8ec2f683dfdcdda0d65818ed5decdbb762c4d1
In scrollable.js (v1.2.5) if you add the size config back with a default of 1:
conf: {
activeClass: 'active',
circular: false,
clonedClass: 'cloned',
disabledClass: 'disabled',
easing: 'swing',
initialIndex: 0,
item: null,
items: '.items',
keyboard: true,
mousewheel: false,
next: '.next',
prev: '.prev',
size: 1,
speed: 400,
vertical: false,
touch: true,
wheelSpeed: 0
}
and then after the if (conf.circular) change the two clone variable lines to this:
var items = self.getItems();
var cloned1 = items.slice(-1).clone().prependTo(itemWrap),
cloned2 = items.filter(":lt(" + conf.size + ")").clone().appendTo(itemWrap);
items = null;