Question

http://jsfiddle.net/yxhzU/1042/

I’m trying to modify this example so that within the top carousel you are able to see 10% of the slides on either side.

Any help getting me pointed in the right direction would be great, thanks!

Viewable area would look something like this:
______    _________________________    _______
______|  |_________________________|  |_______
prev^            ^current^             ^next

Answer 1

http://jsfiddle.net/yxhzU/1069/

I modified the plugin code you were using. I didn’t test it fully, but this will give you a good idea of what you have to do.

I did the following modifications:

Added 2 additional settings

• itemwidth – This is a number from 1-100 which symbolizes the percentage of the carosel width that a single item takes up.

• startingoffset – Similarly it is the amount of starting space on the left is left open also percentage based (0-100)

Finally I modified all the calculations where the elements are wrapped and animated to use new “calculated” widths that include the above scaling.

The problem you were having is that many jquery plugins and the jquery UI stuff wrap your elements in additional “divs” and other DOM objects. So while you were using styles to change the width of your pages in the carosel, they were actually inside other things. I don’t think you could make it work with only css anyway because the animation portions of the code were based off a width that was measured internally.

Edit:
Just FYI, I only viewed it in Chrome.