Centering text in a touch scroller

Question

I modified a version of the iScroll touch scroller. It was modified based on the carousel demo in the sample file when you download the library.

I need to center the text that is displayed when you scroll through each item and when it hits the end of the list it should correctly cycle back to the first item. This is the default behavior.

I got as far as centering the first text item but it only centers the text in the currently selected item and when another item is selected it breaks the text centering, this also breaks the snap back to first element effect when the list is done. I did this by simply adding a margin margin:0 250px.

A sample of the modded scroller is here: http://jsfiddle.net/egfx/5TswV/2/show/

buggy code: http://jsfiddle.net/5TswV/3/

And the library is here: https://github.com/cubiq/iscroll/tarball/master

my resolution: 1600x1200

I am looking for a stretchable solution that would fit any container and res.

Thanks.

Answer 1

Here is your problem: Your Li's are smaller than your container, if you find a way to make the li's the same width as the container, everything will be aligned correctly.

http://fiddle.jshell.net/5TswV/5/show/

http://fiddle.jshell.net/5TswV/5/

Using jQuery:

$('#scroller li').width($('#wrapper').width());
$(window).resize(function(){$('#scroller li').width($('#wrapper').width())});