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 slider configuration.

    touchEnabled: true,
    hideControlOnEnd: true,
    preloadImages: 'all',
    infiniteLoop: false,
    mode: 'horizontal',
    startSlide: 0,
    slideWidth: 300,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10,
    pager: false,
    slideSelector: ".isotope-item",
    nextSelector: "#forefoo2_next",
    prevSelector: "#forefoo2_prev",
    nextText: '',
    prevText: '',
    onSliderLoad: function(){
        jQuery(".sliloading").hide();
    },


jQuery(window).ready(function(){
    var slider4 = jQuery('.cat_fore').bxSlider();
    var slider2 = jQuery('#cat_two').bxSlider();
    var slider3 = jQuery('.cat_three').bxSlider();
    var slider1 = jQuery('.cat_one').bxSlider();

    jQuery("#sel_cat a" ).on("click", function(){
        var current     = jQuery(this).attr("slider");
        jQuery(".sliloading").show();

        jQuery(".slider").hide();
        if( current == "cat_one"){
            slider1.reloadSlider(s1config);
        }else if(current == "cat_two"){
            slider2.reloadSlider(s2config);
        }else if(current == "cat_three"){
            slider3.reloadSlider(s3config);
        }else if(current == "cat_fore"){
            slider4.reloadSlider(s4config);
        }
   }
});

The problem is when the slider is having less then 20 slides it reverses the count of the slides that is it displayed last slide as first slide.

For slides 20 or more then 20 it works fine. I also tried different solutions listed on this link but nothing worked for me.
I tried to replicate the same example on fiddle which is working fine but on live it is still giving the same problem

I think problem is in the height or some other css element which is making it start from the last slide because in fiddle the view port is small so it displayed slider first slide and also when wee try to decrease the size of the view port of the browser it also displayed slider in the right way.

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

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 3

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 4

You just need to stop the loop :

infiniteLoop:false

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

http://bxslider.com/options

Answer 5

As mentioned by OG Sean it´s a Chrome bug.

I hade the same problem and the only thing needed when i tried was this css code:

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

Answer 6

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

Answer 7

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

Answer 8

Working with bxslider was biggest mistake of my life.