bxslider only displays last image when setting infinite loop on true

Question

I use the bxslider-wp plugin and everything is working fine unless I want to switch on the infinite loop option. Then the slides display for a few milliseconds and then vanish behind the clone of the last slide. I don't know why.

According to a solution of this post I already tried:

.bx-clone{
   display: none !important;
}

and adding following:

onSliderLoad: function() {
      $(".bx-wrapper").css(
         "-webkit-transform", 
         "translate3d(-950px, 0, 0) !important"
      );
    }

to the initialize.min.js and the initialize.js files of the plugin. But it didn't help. Anyone knows how to fix this? Unfortunately I'm not allowed to show the site with the bug so sorry for the missing code...

score 3 · Accepted Answer · answered May 16 '14 at 15:25

There is a bug with the infinite loop in bxslider. Can you try adding the option useCSS:false when you call the slider? Like this:

$('.bxslider').bxSlider({
  useCSS:false
//more options here
});

This tells bxslider to disable hardware acceleration and do the animates with the animation of jquery's animate(). Good luck and let me know.

By the way with the display:none; on bx-clone its like disabling the infinite loop so not sure it will work for you.

bxslider only displays last image when setting infinite loop on true

1 Answers1