delayed images at end of AnythingSlider

[SpliFF]

I consider myself a pretty good CSS / JS coder but this one has me beat.

I have a continuous AnythingSlider slider. When it gets to the end of the items it displays image 1 again then there’s a gap of two images. After the slider moves far enough left the missing images suddenly appear. This happens on each loop through. It seems like the slider may be miscounting the page number or width or something, I just don’t know.

http://www.papersofdistinction.com/

Notes:
* Be patient, there are 8 images (li’s) in the list and the scroll speed is fairly slow so it takes about 25 seconds to display the problem
* Using the latest version 1.3 from github (chriscoyer-AnythingSlider-08bcb43.zip)
* jQuery minimised v1.4.2
* the startSlider() function is at the bottom of /styles/layers.js
* the .anythingSlider CSS is at the bottom of /styles/global.css
* the #passing_parade outer CSS is at the top of /styles/gallery.css

I tried:
* Validating HTML and CSS
* Different browsers, it happens in all of them
* Changing the width of .wrapper ul to 99999px and other values
* Switching between width:100% and fixed pixel values on the outer div and wrapper
* Switching between overflow auto and hidden
* Checking for browser caching (the images are being cached)
* Changing the number of images in the list
* Checking the image dimensions are consistent (they are)
* Setting explicit dimensions on li’s and images
* Collapsing whitespace inside the scroller
* Calling the slider from body onload, the end of the body and inline beneath the outer div
* Reading anythingslider JS to work out what’s happening when it loops (but I found it hard to determine)

Source Code:

Code:

• 
• 
• 
• 
• 
• 
• 
• 

Generated Source Code (DOM source after JS transform):

Code:

Stop

• <
• >

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

[attachment=0]missing_image.png[/attachment]

[Author]

Posts