BxSlider displayes last slide as first slide

眉间皱痕 提交于 2019-12-02 20:55:40

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.

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

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

You just need to stop the loop :

infiniteLoop:false

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

http://bxslider.com/options

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

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

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

Working with bxslider was biggest mistake of my life.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!