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

Kevin Davis picture Kevin Davis · Mar 17, 2014 · Viewed 25.1k times · Source

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

Matt Royal picture Matt Royal · Jun 5, 2014

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>