I am still working throughout the current coronavirus outbreak, although at a reduced capacity. Please do get in contact if you have any questions.

Select Page

bxslider loop Issue on last slide

I am a big fan of bxslider, it is a nice free, lightweight and responsive slider that has tons of great options. But I came up against a real problem recently with it where it was looping backwards on the last slide to the first which looked very jarring and lost all fluidity of the slider.

I looked all over the Internet to fix the loop issue and tried plenty of things like reverting back to an older version of jQuery (which would not have been an option), adding little css fixes to the clone elements created etc. None of them seemed to work, I was almost about to give up when I realised that it must have been one of the options that I was using. I went through one by one removing them and narrowed it down to the ‘slideMargin’ option, removing this seemed to make it work. So what I did was to remove that and change the margins I wanted in the css. This worked well

I imagine this is maybe just a bug with the value I was using in the options because I was using the latest version of the slider. Either way, thankfully it is simple enough to set this value in the css for the slider and just avoid the problem entirely.

Overview: Just remove slideMargin option in the JS and set it in the CSS.