My bxSlider horizontally spans 100% of the browser width - multiple (image) slides display across the viewport, with “moveSlides: 1” set in the options.
A total of 8 slides are being rotated. As I click the “next” arrow to progress through them, something odd is happening at the end. As the 8th slide initially enters the viewport from the right and I continue clicking, there aren’t any images displaying to the right of it UNTIL it’s about cycle out again through the left side, at which point slides #1-3 suddenly appear where they should in the sequence. From there, the cycle repeats, with the same scenario occurring once slide #8 enters the viewport again.
Basically, I want slide #1 and so forth to appear to the right of slide 8 as soon as they’re supposed to show up in the viewport, without this lag. After inspecting the CSS, I’m pretty sure it’s a matter of the viewport calculation being off (specifically, the “left” position of .bx-viewport).
How can this specific calculation (the wrapping of the slide lineup) in jquery.bxslider.js be modified? Or is there another approach I should take, one that wouldn’t require tweaking the viewport calculations?
I’ve replicated the issue in jsFiddle: http://jsfiddle.net/astewes/S7L2n/1/