search

jsor / jcarousel

Riding carousels with jQuery.
https://sorgalla.com/jcarousel/
MIT License
1.99k stars 736 forks source link

Scroll -=1 Does not compute proper item width and similar for +=1 after 1 cycle #582

Closed rcollette closed 11 years ago

rcollette commented 11 years ago

When I scroll -=1, the width of the item is not computed correctly. The width is too small. The result is the left offset set prior to animation/translation is too small, the new item partially appears in the left of the carousel and then translates to left:0px.

The same thing appears to be happening when scrolling +=1 after 1 cycle through the items. This might have already been identified in issue https://github.com/jsor/jcarousel/issues/575

This jsFiddle demonstrates the issue: http://jsfiddle.net/rcollette/fR2GN/

If you uncomment line 560, the left -=1 scroll issue appears to be fixed.

The following is a screencast that shows the issue as well. The -=1 scroll issue may not be fully apparent because the framerate of the video might be too slow. The +=1 scrolling issue is obvious. http://www.screencast.com/t/3V0CQoz0k

jsor commented 11 years ago

If i understand the issue correctly, thats due to incorrect CSS stylings. The container (#jcarousel-clip) needs a position:relative and the list (#jcarousel-clip ul) a position: absolute. Does this fix your issue?

rcollette commented 11 years ago

I appreciate the quick response. Unfortunately, that does not fix the issue and now the carousel is not "clipped". I can see the newly inserted item on the left before it scrolls into view and the portion of the right most item that should be scrolled out of view. http://jsfiddle.net/rcollette/fR2GN/16/

jsor commented 11 years ago

You have a missing ; after height:184px.

rcollette commented 11 years ago

Ughh. So sorry this took up your time. I wish there was a way to up vote someone here when there is good support given on an issue. In my actual application code the semicolon was not missing. I must have missed it when pasting in. So the original cause for my issue was the incorrect position settings as you stated initially.

I am not sure these style settings are required in all cases, but if so having jCarousel add them might be helpful.

jsor commented 11 years ago

Glad i could help. Has been easy, since the issue was excellently prepared.

I have the minimal required CSS in the docs: http://sorgalla.com/jcarousel/docs/reference/installation.html#setup Maybe i should make that more prominent and mention explicitely the position requirements.