circular (continuous) scrolling with an uneven number of images Created Mar 16, 2010

I have the same problem, there is coming a gap between de last item...

you can see it on:

http://test.theater-diligentia.nl/

is there an solution for it?

Size is the number of visible items within the scrollable-enabled HTML element. This property can also be referred to as the "page size", since it defines how many items are moved in a particular direction when either the nextPage or prevPage actions are executed.

(Taken verbatim fromhttp://flowplayer.org/tools/scrollable.html)

In Timbo's case size should be 2.

Hi,

Same problem here for me (left hand side vertical Scrollable) :
http://www.cruselita-shop.com/index.php/fr_fr/presentoir-bijoux-bague.html

My client wants to have a 1 by 1 scroll (size:1) but having the carousel looping (thus using circular() ). So setting the size to 4 in my case is not an option.

So, basically, how to make sure that, when the "size" is lower than the actual number of displayed items, the circular() plug in correctly displays the first item at the right moment ?

Thanks !
Hervé

Exactly the same issue for me. Basically what I'm after is that I have 5 visible items, they scroll one by one. But I don't want the list to reach to the start of the list to start displaying from the beginning, I get like 2 empty slots before it loads them again. You know what I mean.

Why couldn't the the list start looping when the last item of the list scrolls to the viewport? I mean, technically it does do that, but the possibility of having the viewport bigger than the item itself hasn't been calculated in here.

Well anyway, if the previous examples given here before me weren't enough, this is my piece of work in progress:

http://dl.dropbox.com/u/134218/OP/html/index.html

Similar to ragunaru.. Is there anyway to preload the images so that when the last image enters the viewport the first ones are ready to go?

Any help would be greatly appreciated

Anyway, I somehow managed to get a workaround here. Good to see the amazing response time of the developer, though.

Hi Ragunaru.... I think I have the same issue here, how did you manage to get your's to Loop seamlessly ?

I have x2 visible images and want to scroll one image at a time....

http://is.gd/bH5lN

Any help greatly appreciated :-) its got me well confused....

Hey, you!

Hmm, well, honestly... I'm not even sure how or why it's working but it is. I was just playing around without really expecting anything. Actually, you can't have scroll buttons the way I set it up, it's just on auto scroll. Wait, I'll give you the code I'm using.

$("div#intro_slider_content").scrollable({size: 5}).circular().autoscroll({interval: 3000, autoplay: true, step: 2});

Just try to use this and it should work out somehow. Just play around with it. But, yeah, unfortunately you have to forget about the scrolling buttons then as it'll scroll the amount that is set with the "size"... in my case it's 5 as I have 5 visible items. In your case it should be 2 then. I'm not sure if the autoscroll will scroll one at a time in your case but if it does in my case, why shouldn't it, right? Anyway, I know I'm not being much helpful but you have to manage somehow as the developer doesn't seem to care all that much. Maybe aliens abducted him, that would explain a lot.

Anyway, take care! If you have more questions, I'd be glad to help in any way I can. :)

Hey Ragunaru...

thanks for the response there, I see yours works great, also yes I need the Nav Buttons, and no Auto Scroll...

So close but yet.... I also achieved some similar results using

http://www.malsup.com/jquery/cycle/

but these are all based around 1 visible slide, not 2 or 5 .....

anyway many thanks for the response....

Kie

@ragunaru

You are using version 1.1.2 to get this to work. This doesn't work 1.2.

I'm having the exact same problem.

Is there no solution to this?
See my problem in more detail:

http://stackoverflow.com/questions/3385892/jquery-tools-scrollable-circular-problem-with-a-logo-parade-logos-dont-re

Please help!

Hey,

Someone kindly posted a solution here:

http://flowplayer.org/tools/forum/35/46918

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;

Is there anyway to get this to work with autoscroll activated?