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

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
        });    
    });