This is the simplest and cleanest way to fix the issue of BxSlider slides all showing up in a bunch when the page loads.
First we’ll add a div around the default bxslider unordered list. You’re code might look different than this but the same basic structure should be there.
<div class="bxslider-wrap"> | |
<ul class="bxslider"> | |
<li>Image / Content</li> | |
<li>Image / Content</li> | |
<li>Image / Content</li> | |
</ul> | |
</div> |
Next, we’ll add some css to hide the entire slider by default when the page loads:
.bxslider-wrap { visibility: hidden; } |
Lastly, we will set the slider visibility to visible via jQuery so that when the slider is finished loading it will display without the mess.
jQuery(document).ready(function($) { | |
$('.bxslider').bxSlider({ | |
onSliderLoad: function(){ | |
$(".bxslider-wrap").css("visibility", "visible"); | |
} | |
}); | |
}); |
That’s it! Hope this helps!