BxSlider displayes last slide as first slide

Question

I have created 4 sliders. Initially all 4 are hidden (display:none) so I have used this code to display the relevant slider on click of its respective category.

The slid

Answer 1

I was having this problem too just recently. The solution is you have to put the instance of BxSlider on $(window).load() event not in $(window).ready() here's a sample.

$(window).load(function(){
            $('.bxslider').bxSlider({
                pagerCustom: '#bx-pager',
                randomStart: false,
                controls: true,
                auto: true
            });    
        });

It is important to note that the problem starts to persist once you have at least 7 slides.

Answer 2

This is a chrome-only bug for me, where the "clone slide" intended for making seamless scrolling from the last slide back to the first will show first pushing the actual first slide out of the way. Hiding the clone slide is a quick fix but breaks the infinite scrolling effect.

This below solution fixed it for me strictly with CSS, no gnarly 3D transform CSS, Jquery, or anything... plays OK with bootstrap now:

/* BUG FIX FOR CLONE SLIDE FIRST */

.bx-wrapper img {
    max-width: 100%;
    display: inline-block;
}

.bx-viewport li { 
    min-height: 1px; 
    min-width: 1px; 
}

I think if you're using jquery to show the clone using onSlideBefore you've gone too far, there is probably a CSS fix depending on your specific situation. Sometimes it stems from an image size and/or display style issue with BOOTSTRAP, so if you're using BS, there's a CSS fix for sure. In general, if all of your slides are the same size try setting the height and width, max height and width, and min height and width for the images and it may fix it.

This isn't necessary, but if that doesn't work, in the bxSlider init options try useCSS: false, ex:

$(window).load(function(){
        $('.bxslider').bxSlider({
            pagerCustom: '#bx-pager',
            randomStart: false,
            controls: true,
            auto: true
            useCSS:false
        });    
    });

Answer 3

Fast solution:

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

If you don't want to lose the infiniteLoop animation:

   onSliderLoad: function() {
      $("YOUR_SLIDER_SELECTOR").css(
         "-webkit-transform", 
         "translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)"
      );
    }

Answer 4

Ok I don't know why but when I remove this line "minSlides: 2," it start working in the right manner.

Answer 5

You just need to stop the loop :

infiniteLoop:false

...and there is no more .bx-clone

http://bxslider.com/options

Answer 6

<li>
    <img src="_images/xxx.jpg" alt="xxx" width="X" height="X"/>
</li>

Setting an explicit height and width tag on the images in the slider fixed this issue for me with sliders containing 2-5 images.