bxslider infinite loop scrolls left to first slide instead of right to loop

Question

I have a quick question with bxslider.

The issue that I'm having is that an infiniteLoop set to true, however, when it gets to the last image it goes left instead of the first slide of the loop. Here is my code:

<script type="text/javascript">
  $(document).ready(function(){ 
     $('.bxslider').bxSlider({

         auto: true,
         autoControls: false,
         controls: false,
         pause: 4000,
         infiniteLoop: true,
         mode: 'horizontal',
         autoDirection: 'next',
         responsive: true,
         preloadImages: 'all',
         minSlides: 2,
         autoDelay: 0,
         randomStart: false,
         pager: false,
         moveSlideQty: 1

       });
     });
   </script>    

Answer 1

I found this solution previously that may work for you if you have not yet found a solution.

For me the problem was the CSS3 transitions and adding useCSS: false forces bxslider to use jQuery for the transitions instead of CSS.

    <script type="text/javascript">
      $(document).ready(function(){ 
         $('.bxslider').bxSlider({

             auto: true,
             autoControls: false,
             controls: false,
             pause: 4000,
             infiniteLoop: true,
             mode: 'horizontal',
             autoDirection: 'next',
             responsive: true,
             preloadImages: 'all',
             minSlides: 2,
             autoDelay: 0,
             randomStart: false,
             pager: false,
             moveSlideQty: 1,
useCSS: false,

           });
         });
       </script>