Question

I’ve got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.

I’d like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.

I’d like the width of the container to appear as 100% of the window, and I’d also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that’d be great but it’s not a must have.

Here’s what I’ve got:
http://jsfiddle.net/696je/

I’m just looking for a function and the way to activate the function for left/right buttons.

I’ve tried Google for hours, I’ve tried Flesler’s ScrollTo but I haven’t had any luck, it might be something do to with the way I’ve got the width set up, anyway, thanks for your help.

Answer 1

It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)

here is a jsFiddle implementation with minimum possible wrappers.