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.
I just experienced the same issue, and this was very helpful. Thank you!
Hello, i am still having this problem and struggling with it.
I didnt use the slideMargin though so i added it and set it to 0 after reading this article, hoping this to work but still no.
When the slider displays the last slide and continues, it rolls back to the first, showing all the slides instead of continuing smoothly to the first (that’s why clones are made for, right ?)
Do you have any idea to fix my problem ?
Thank you
Never mind !
I had to write this test in my css :
.bx-clone{
display: none;
}
Then i forgot about it *facepalm*
So yes of course bxSlider couldn’t understand and couldn’t go to the next real slide 🙂
I found out by putting only bxslider styles (it worked) then i started eleminate my custom styles blocs by blocs until i found the problem.
Hi Ben,
Glad you worked it out. I have actually started using this in jQuery dependant projects http://kenwheeler.github.io/slick/ it has a ton of features and is really easy to customise. Then I just created a simple javascript only version for other projects.
Thanks,
Steve