title: Can't work out whats wrong with my Carousel
body: <p>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 .</p>
  
  <p>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.</p>
  
  <p>When Next is pressed the first slide is offset by it's width using <code>margin-left</code> 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.</p>
  
  <p>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.</p>
  
  <p><a href="https://jsfiddle.net/rL3xc86L/3/" rel="nofollow">Here's a fiddle</a> any help would be very much appreciated</p>
  
  <p>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.</p>