Bug? Last slide shows first on init.

[tophermiller]

I'm observing that the last slide in a set of 20 shows up at the top of the list when the slider is first loaded? Is this a bug? Is there a workaround? I've posted a simple page that re-creates the problem here: http://www.tophermiller.com/sliderbug.html

[HexCyclos]

.

[davidflaforest]

I have the same problem.

[edthetechie]

Same issue here, I've looked at the JS, CSS, slider content and every possible thing I can think of but I'm completely at a loss to explain this behaviour. Has anyone found a solution to this?

[themisseducated]

I'm encountering the problem and I only have nine slides. The problem goes away if you hit ENTER to reload the page manually in Chrome.

In my case, while the page is still loading, the first slide shows up. Once the page loads completely, it moves to the last slide. Since the script duplicates the last slide to the top of the list with class="bx-clone", the problem might be this:

Since the script is loaded last, it interprets the prepended last slide as the first child in a given list of slides.

I think this bug comes out when the page is too big or the slides contain a lot of high-res images. It just messes with the way the script is rendered? Anyway, I haven't inspected the bxslider script properly yet. I'll have to check what I can do to fix this.

[sstarrs]

Also seeing the same.

[modrovsky]

I too had this problem, but then I put mine inside of window load, and I haven't had the issue since. Below is just a small snippet of my code.

$(window).load(function() {
  if ($('#CollSlideshow').length) {
    var collectionSlider = $('#CollSlideshow').bxSlider({
    });
  }
});

Here is the full thing if anyone is interested, not that the rest of these parts matter to the original issue.

$(window).load(function() {
  if ($('#CollSlideshow').length) {
    var collectionSlider = $('#CollSlideshow').bxSlider({
        mode:     'vertical',
        startSlide: 0,
        speed:  1250,
        timeout: 0,
        pager: false,
        touchEnabled: true,
        nextSelector:   '#next',
        nextText: '<i class="arr-r-grey"></i>',
        prevSelector:   '#prev',
        prevText: '<i class="arr-l-grey"></i>',
        adaptiveHeight: true,
        onSliderLoad: function() {
          /* Load Inital Slide Count */
          var current = collectionSlider.getCurrentSlide() + 1
          var slideQty = collectionSlider.getSlideCount()
          $('#Count').html(current+ '/' + slideQty)

          /* Toggle The Drawer Based on First Slide */
          $(".CollSlideThumbs[data-count='" + current +"'],.CollSlideProductInfo[data-count='" + current +"']").css('display','block');
        },
        onSlideBefore: function() {
          /* Update Slide Count */
          var current = collectionSlider.getCurrentSlide() + 1
          var slideQty = collectionSlider.getSlideCount()
          $('#Count').html(current+ '/' + slideQty)

          /* Toggle The Drawer Based on Current Slide */
          $(".CollSlideThumbs, .CollSlideProductInfo").hide();
          $(".CollSlideThumbs[data-count='" + current +"'],.CollSlideProductInfo[data-count='" + current +"']").css('display','block');
        }
    });
  }
});

[sstarrs]

@drewmodrov That'll have to do. Thanks.

[timstermatic]

The solution by @drewmodrov worked for me too.

It has to be $(window).load()

I was using $(document).ready() and the bug occurred on 7 slides.

[boone]

This problem was happening to me because I was inadvertently calling bxSlider() twice on the element during $(document).ready().

[HLMT]

I was having this same issue and tracked it down to height: auto; being set on the base img tag in bootstrap.css. I set a specific height for the slider img tags (in a different stylesheet) and that fixed the issue.

[dzaal]

I can confirm that this problem is gone when using $(window).load() and after a refresh (when images are loaded I gues)

But then a new very ugly new issue comes up when you have a responsive layout: before firing up bxslider, you will see all images loaded above each other. Hopefully this issue is quickly fixed because it just makes the slider ugly!

[terales]

I can confirm HLMT solution: if you explicitly set height to img tag - this bug will go away.

[somebeaver]

Also can confirm that setting a height on the used in the sliders will fix the issue. This issue also only seems to happen on sliders with many pictures (8-10 or more, approx).

[jdwebwork]

You can get around this bug by hiding .bx-clone in your CSS.

Then use the bx slider option onSlideBefore to make a javascript call in order to unhide .bx-clone. This basically stops the .bx-clone from appearing as the first slide BUT then it adds that slide back in so that the slider can rotate through all the slides and then back to the first one elegantly. If you don't unhide the .bx-clone then the slider breaks after displaying the last slide in the list. This means you don't have to give a specific height to the slides.

Hope this helps. Took me quite a while to figure out. :-)

[mrutt]

Confirming above. Setting explicit height & width tags to images in slider fixed issue for me with slider containing 2-5 images. Thanks!!

[dubbsdubblin]

@ jdwebwork - do you have an example of your solution in code form? Doing this makes the slider jump back to the first instance of bx-clone LI - not a nice fix...

[jdwebwork]

Yes mate, The below should sort the issue out for you. It does cause a very quick flicker but my client didn't have a problem with it.

/* CSS */

.bx-clone { display: none; }

/* Slider JS */

$(document).ready(function(){ var slider = $('.bxslider').bxSlider({ auto: true, pager: false, onSlideBefore: function(){

            if ( !$('.bx-clone').is(":visible") ) {
                $('.bx-clone').show();
            }
        }

    });

});

[dubbsdubblin]

Is there a way without the flash of the first instance of bx-clone??? I really hate the flash / glitch looks awful!

Cheers,

Jon Wallace jonwallacedesign - digital design studio

[sent from my iPhone4] [therefore please excuse any typos! :-) ]

On 8 Apr 2014, at 17:19, jdwebwork notifications@github.com wrote:

Yes mate, The below should sort the issue out for you. It does cause a very quick flicker but my client didn't have a problem with it.

/* CSS */

.bx-clone { display: none; }

/* Slider JS */

$(document).ready(function(){ var slider = $('.bxslider').bxSlider({ auto: true, pager: false, onSlideBefore: function(){

        if ( !$('.bx-clone').is(":visible") ) {
            $('.bx-clone').show();
        }
    }

});

}); — Reply to this email directly or view it on GitHub.

[Daijobou]

Same issue here with 4.1.2

For me help this css-code (without js-code) .bx-clone { display: none }

Thanks jdwebwork :)

[jmagnone]

Same issues here. None of these fixes is working for me. The slider is not working and the last slide is appearing when it is loaded. No errors are reported in the console. I tried to hide .bx-clone I tried to put the slider under $(window).load() I tried to set fixed width and height to images in the gallery.

I am using 4.1.2 and the slider contains 4 to 10 images. Is there any other workaround?

I am using the slider inside four or five div level. I checked the source code and markup is ok (all divs are closed and no other markup errors). If I take the piece of code that displays the images and put it at the very beginning of the source code then it works (less divs here).

[saiyuke]

Thanks !!!!! After many hours of research, I just had to add this sh***y line

.bx-clone { display: none }

(-_-)"

[robbieobbie]

had the same problem. i turned off CSS by adding the option useCSS:false which fixed all of my issues with improper loading and incorrect slide order.

[francescocortese]

It is a chrome bug, you can solve with { min-height: 1px; min-width: 1px; } on the item slide: .bx-viewport li { min-height: 1px; min-width: 1px; }

https://github.com/stevenwanderski/bxslider-4/issues/154

[jbakeraac]

I have read this thread, very interesting. I have a slightly different problem. I am running this slider with a Wordpress Loop, and it keeps adding the first slide to the end of the list. So if I call 3 recent posts, it will show the 4th as the first one. I tried the .bx-clone {display:none;} and it didn't do anything.

Here is a link to my example page to see what's going on:

http://www.artacademy.edu/includes/news-block.php

Here is my BX script on the page:

I know it's not the WP Loop causing it, because I'm already running it on another page with no duplicates.

I am sooooo close to having it perfect, and just need to overcome this last hurdle to be able to implement it. Please help. Jimmy

[jbakeraac]

My script:

     <script>
  $(window).load(function(){
        $('.bxslider').bxSlider({
           useCSS:false,
            randomStart: false,
            controls: true,
            auto: true,
            pager: true,

        });    
    });
       </script>

[robbieobbie]

From the bxslider website: "Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!"

You may want to try replacing the window load function with document ready.

[jbakeraac]

Nope, it didn't work. I tried this, and same result:

<script>
$(document).ready(function(){
        $('.bxslider').bxSlider({
           useCSS:false,
            randomStart: false,
            controls: true,
            auto: true,
            pager: true,

        });    
    });
   </script>

[robbieobbie]

Give this a try:

jQuery( function( $ ) { $(document).ready(function(){ $('.bxslider').bxSlider({ useCSS:false, randomStart: false, controls: true, auto: true, pager: true, });
}); });

[jbakeraac]

Man, still no luck. Just to prove I'm not crazy, you can follow this link to see that my loop is pulling simple text entries. All I did was change the number of posts, and add a Featured Image to the loop.

I'm not great with JS, so hopefully you guys can figure it out.

Scroll Down for Current New section, that's practically the same loop. http://www.artacademy.edu/index.php

[HLMT]

Could it be that you are not closing the ul or the containing div class=“slide-wrap” in the markup?

[jbakeraac]

HLMT, you were right, I was focusing on everything but the obvious. I closed my

and
after the rest of my loop, and the extra slide is gone. Thanks, and sorry.

[darylknight]

This issue is still happening - any chance of a source fix after 2 years? :)

Things I have tried that don't work:

using document.ready useCSS: false

It's not a Chrome bug - happens in Firefox too. Setting a height isn't an option, as that stops it being responsive.

Narrowed it down - this only happens when the < li> only has an image inside it. If it's an image + paragraph, it doesn't happen.

[RapicMilan]

I have the same problem, the solution was to add this line to css: .bx-clone { display: none; }

Thanks, @Daijobou

Rapić Milan http://www.rapicmilan.com

[Warface]

That CSS fix should be updated in the git right away!

[pulse00]

If anyone else runs into this and none of the above workarounds fix the issue: For us the problem was that the container of the bxslider was initially hidden. We've removed display: none after the bxslider was rendered, which resulted in that exact behavior. Not hiding the parent container initially fixes this.

[rodrigoruiz]

I'm not hiding it and still getting the problem. I am hiding with:

.pog-hidden {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

[amichel86]

This solved it for me : http://stackoverflow.com/questions/18373143/bxslider-displayes-last-slide-as-first-slide

[timholz]

A fixed css-height works, but is not good for responsiveness.

[juanpasolano]

The stackoverflow thread mentioned by @amichel86 worked for me.

[timholz]

I am calling the bxslider like this:

$("#show").click(function(event) {
1. build the html...
2. animate (width an height) of the slidercontainer
3. when everything is ready: testslide = $('#slider1').bxSlider({lots of settings})
}

Without a fixed height for «.bxslider img» the slider jumps to the last image (safari, chrome) jsfiddle: https://jsfiddle.net/timholz/ttc9ykLd/ Is there a way to bring

$(window).load(function(){};

into ths setup?

[zastrich]

Use this option:

onSliderLoad: function(){ $(".bxslider").css("transform", "translate3d("+($(".bxslider li:eq(0)").width()*-1)+"px, 0px, 0px)"); }

[timholz]

@zastrich Thank you very much. This works fine. regards theo

[bahreddine1981]

@dubbsdubblin

Thank you very much. This works fine.

[lionelferrer]

Just a min-heigh: 1px is enough to fix this issue, and maintain also the responsiveness working properly. There's any need of inject JS fixes. My 2 cents (late, but two cents are two cents XD)

[gfgfgf223]

HLMT, you were right, I was focusing on everything but the obvious. I closed my

and after the rest of my loop, and the extra slide is gone. Thanks, and sorry.