I'm building an website that uses bxSlider.
As the page loads, all of the slides are visible, stacked on top of each other. Once the page is fully loaded, the first slide remains visible and the rest disappear so that the slider can animate and display them one at a time.
I've tried using various CSS and bxSlider callbacks to hide the slides until the page fully loads, but no luck. Does anyone know how to do this?
Thanks!
I had the same issue and this trick helped me out:
<ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">
put height and overflow values on the ul element of the slider.
Best Regards
I don't know about exactly style="display:none" method, but when "hide()/fadeOut()" with jQuery bxSlider's container and after that init bxSlider, it'll be rendered with errors in markup. (possibly using display:none would avoid the error, but if you want to fade yours slider, my method would be appliable)
just position your container as 'absolute' in css and in your JS before initialization of bxSlider move it to invisible part of the page, init it, and then hide it, return it to the former point and finally fadeIn:
$("#bxslider-container").css({'left' : "4000px"});
$('.bxslider').bxSlider();
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000);
hope it'll help