How can I scroll an inline unordered list of images in a div that is page width? (JQuery)

Question

I have a "bar" across the top of my page, 100px hight and 100% page size.

I have an unordered list of images displayed inline in there 80x80 (10px padding all round) and I have tried several methods of displaying "more" images than fit on the screen either by wrapping to several lines or by scroll.

What I would prefer would be something simple and elegent on each side I could click to have it scroll across one more image each click, or hover over the "button" to have it continuously scroll.

UPDATE: I got it working with JCarousel but then decided I'd prefer to write it entirely myself.

I current have a working system whereby I can click on a button either side of the screen to have it scroll left or right a certain amount. My only problem is that if I keep clicking once it's ran out of items to scroll it still increments the number. I need to make sure it stops when it's done, otherwise i have to click the same number of times in the opposite direction before it starts moving again.

I tried doing it by counting the number of elements in my unordered list but that didn't work because there isn't always the same number of items on the screen at different resolutions and window sizes So I cn't allow a certain number of clicks in each direction.

My next option is to dynamically find the screen width and use that to scroll, any ideas?

Answer 1

If I understand you correctly, this plugin might help. (The demo image takes a moment to load.)

It allows you to scroll an overflowed area without scroll bars. I've used it in combination with click events on the listed items, and it works fine.