I've built an image carousel using Prototype.js - yes I know it's out of date and there's a million jQuery carousels out there but our platform has a lot of legacy Prototype code which we can't upgrade from .
The carousel pretty much works but there's one bug I can't figure out. Clicking the Next button always slides the next image in perfectly but clicking the Previous button only works sometimes. The previous image is always prepended to the start but the sliding in animation doesn't always happen.
When Next is pressed the first slide is offset by it's width using margin-left so it slides out of view, it's then appended to the end of the queue and has it's margin-left reset to 0.
When Previous is pressed the last slide is prepended to the front of the queue then offset left using it's width and then slides in to place by removing the offset.
Here's a fiddle any help would be very much appreciated
I think the issue is that sometimes the function which resets the last slides margin-left to 0 is called before it's been offset so it just appears at the front.
It turned out to be frustratingly simple to fix this, I changed the timing for slide transitions from 0.5 seconds to 1 second and the bug has gone. Still not 100% sure why but I think the functions takes longer when animating previous slides compared to next slides and so needed a bit more time to catch up with itself to avoid falling over.