The scroller loads with one image inside the scroller which has a width: 715px;

[ [1] ]

When the user clicks on that image, a second image is dynamically appended to the first:

[ [1] [2] ]

And, when the second is clicked, the same thing happens (and so on):

[ [1] [2] [3] ]

Now, here is where I need some help. When the final visible image in the series is clicked on, the preceding images should scroll to the left to make room for the new one, putting the first out of view and placing the new image at the end as such:

[ [2] [3] [4] ]

This goes on indefinitely - each time the final image is clicked the preceding ones should scroll to the left, placing the new image at the right-most view within the DIV.

[ [3] [4] [5] ]

I have played with the below CSS (what you see is the state of my most recent attempt). What I have been able to achieve is:

1) The images build consecutively and then overflow (to the right) when the fourth image exceeds the 715px mark. Not what I want.

2) The below CSS "Does" do what I want (sort of) - it starts on the left of the DIV and then works to the 715px mark and starts to push the images (backwards) to the left and out of view - always leaving the most recent image to the far right of the DIV and in view. THE PROBLEM with this is that the order is FLIPPED (I think, due to RTL). I have tried to trick it with text-align:left but that doesn't seem to do anything.

Why do you need direction:rtl on #scroll? — Divya Manian over 8 years ago

I don't. It was there when I posted this (sorry - sloppy) but I have since taken it out. For what it is worth, RTL - 'does' product the effect I want, just backwards. It adds a new image up to the 715px margin then, as more are added scrolling happens to the left. But, my image order is backwards (the first image leads). Pls. help - completely beaten on this. — Code Sherpa over 8 years ago

PS - By the way, what "isn't" working in FF is that when the page loads, the first image is all the way to the right. In IE, it is at the left of the scroll div and the images overflow left when the right margin is reached.