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

Question 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>

Question 2

This seems to occur for me when I set minSlides to 1. None of the other solutions worked for me, but changing minSlides to more than 1 stops the issue from occuring.

Looking into this further, there's an issue raised on GitHub that flags this up - there's a cushion built into the plugin for the container width that isn't large enough: https://github.com/stevenwanderski/bxslider-4/issues/467

There's a simple fix committed waiting to be merged: https://github.com/stevenwanderski/bxslider-4/pull/468/files

I've tried it, and it worked for me.

Question 3

I had a similar issue. For me, the problem was that I had inadvertently added a class of bx-clone to the html elements that make up bxslider's slides. Bxslider adds this class when applied to a set of HTML elements so doing this manually must have interfered with things. When I removed this class attribute then the transitioning from last slide to first was fine (i.e. smoothly continuing to the right rather than scrolling quickly left through all slides).

broken code:

<body>

    <script>

        $(document).ready(function(){
            $('.bxslider').bxSlider({
                infiniteLoop: true,
                minSlides: 1,
                maxSlides: 1,
                pager: false,
                slideWidth: 320,
                touchEnabled:true
            });
        });

    </script>

<ul class="bxslider">
  <li class="bx-clone"><img src="images/tree_root.jpg" title="Funky roots" /></li>
  <li class="bx-clone"><img src="images/hill_road.jpg" title="The long and winding road" /></li>
  <li class="bx-clone"><img src="images/trees.jpg" title="Happy trees" /></li>
</ul>

</body>

fixed code:

<body>

    <script>

        $(document).ready(function(){
            $('.bxslider').bxSlider({
                infiniteLoop: true,
                minSlides: 1,
                maxSlides: 1,
                pager: false,
                slideWidth: 320,
                touchEnabled:true
            });
        });

    </script>

<ul class="bxslider">
  <li><img src="images/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="images/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="images/trees.jpg" title="Happy trees" /></li>
</ul>

</body>

Question 4

This is what finally worked for me. This took me ages to work it out but the single quotes for the values, along the other answers listed above, fixed the roll back to first slide issue. It now smoothly transitions to the first.

    <script type="text/javascript">
       $(document).ready(function(){
       $('.bxslider').bxSlider({
           pager: 'false',
           mode: 'horizontal',
           auto: 'true',
           speed:  '900',
           pause:  '6000',
           controls: 'false',
           slideMargin: '20',
           slideWidth:  '940',
           infiniteLoop: 'true',
           maxSlides: '1',
           moveSlides: '1',
           moveSlideQty: '1',
           useCSS: 'false',

        });
        });
    </script>

Question 5

Seems like Bxslider sometimes miscalculates the width of the wrapping ul container. This forces the ending bxclone to not render to the right of the last element. No matter how I couldn't get it to remove the inline margin-right it added to the inner li elements however a simple:

.bxslider{
@include respond-to-max(phones) {
        margin-right: 2px !important;
    }
}

solved it for me.

Above is a fix for

$('#section-from-store-slider').bxSlider({ 
    mode: 'horizontal',
    captions: false,
    adaptiveHeight: true,
    prevText: '',
    nextText: '',
    slideMargin: 0,
    autoReload: true,
    infiniteLoop: true,
    breaks: [{ screen: 0, slides: 1 }, { screen: 768, slides: 3 }, { screen: 1024, slides: 4 }]
});

Now I used 2px since bxslider set it to 5px which made it to wide, depending on format, 3px or 4px or perhaps even 0 solves it for you.

I know this is classified as an "ugly" bug, we don't like !important. But this is injected inline style so.

Below would be the simple non sass, non responsive css:

#yourslider.bxslider li{
    margin-right:0 important!;
}

Question 6

If you are using Wordpress and have your slider in the sidebar then the issue appears to be that the slideMargin option (>0) is stopping the images from being in order. These are the settings I have used:

<script type="text/javascript">
jQuery(window).load(function() {
    jQuery('.testimonials-slider').bxSlider({
            minSlides: 1,
            maxSlides: 1,
            slideMargin: 0,
            infiniteLoop:true,
            autoReload:true,
            auto: <?php echo isset($data['auto']) ? $data['auto'] : "true";?>,
            pager:<?php echo isset($data['pager']) ? $data['pager'] : "true";?>,                
            adaptiveHeight:true,
            controls:<?php echo isset($data['controls']) ? $data['controls'] : "true";?>,
            autoControls: false,
            speed:<?php echo ((isset($data['speed'])) and (!empty($data['speed']))) ? $data['speed'] : "500";?>,
            mode:'<?php echo isset($data['mode']) ? $data['mode'] : "horizontal";?>',
            randomStart:<?php echo isset($data['randomstart']) ? $data['randomstart'] : "false";?>,
            pause: <?php echo ((isset($data['pause'])) and (!empty($data['pause']))) ? $data['pause'] : "5000";?>
    });
});
</script>

Just ignore the PHP settings. The main thing is to set slideMargin: 0, infiniteLoop:true, autoReload:true,

Question 7

This may seem to be stupid and I was struggling with this problem a lot, when one of my other developers realized that we were calling the bxslider function twice - once from the plugin and other, manually.

On chrome, hit Ctrl + U, and do a quick search for bxslider. If you see it twice, remove from the course code and you should be good.

Question 8

My issue was slightly different, but this may help someone.

I was working with a boxslider. Lets say I have had four slides automatically rotating on the carousel. The code that I started with was set to start at the 1st slide, and stop at the last. I wanted it to continuously rotate or perform an "infiniteloop". When I set the infinite loop to true in jquery.bxslider.js, the slider would display slides 1 and 2, and when it got to 3, it would zip through it and display slide 1, then 4, and then it would start over again. This of course causes an issue for content that I want to display on slide 3. My code is below, and what I did to fix it.

<script src="common/js/jquery.bxslider.js"></script>
<link href="common/css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){


$('.slider1').bxSlider({
mode: 'horizontal',
slideWidth: 940,
minSlides: 1,
maxSlides: 9,
slideMargin: 20,
controls: true


 });
});
</script>



<div id="carousel">


<div class="slider1">
        <div class="slide">[STUFFHERE]</div>
        <div class="slide">[STUFFHERE]</div>
        <div class="slide">[STUFFHERE]</div>
        <div class="slide">[STUFFHERE]</div>
        </div>
        </div>

Changing the settings in jquery.bxslider.js so that infinite loop is true

// GENERAL
    mode: 'horizontal',
    slideSelector: '',
    infiniteLoop: true,
    hideControlOnEnd: false,
    speed: 500,
    easing: 'ease',
    slideMargin: 0,
    startSlide: 0,
    randomStart: false,
    captions: false,
    ticker: false,
    tickerHover: false,
    adaptiveHeight: false,
    adaptiveHeightSpeed: 500,
    video: false,
    useCSS: true,
    preloadImages: 'all',
    responsive: true,

What I had to do to fix it was change the min/maxslides values. Whatever they default values were, they were not allowing the infiniteloop setting to work properly. It may take some some experimenting depending on your own requirements for the slider, but this is what worked for my problem.

$(document).ready(function(){


$('.slider1').bxSlider({


 mode: 'horizontal',


slideWidth: 940,
minSlides: <!--from 1--> to 0,

maxSlides: <!--from 9--> to 1,

slideMargin: 20,


controls: true