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!
Thank You so much 🙂
Thanks! That helped.
Thanks, super solution!
Glad it helped Alex!
This is probably a crazy question but… where does .bxslider-wrap { visibility: hidden; } . In the html doc? in a js file?
Hi Michelle,
.bxslider-wrap { visibility: hidden; } is CSS so the best place for it is in the styles.css file for your theme or any stylesheet being enqueued on that page.
Thanks for reaching out!
Thanks, Jordan! This is a very simple and smart solution. Appreciate you sharing it.
Sure thing Sean!
you da man
Thanks! Glad it helped you!
Very thankzz Jordan ..
Simple and elegant! Thank you!
Sure thing! Glad it helped you out!
Hi Jordan,
Thank you. This is a nice, quick solution.
Worked perfectly!
Sure thing!
Thank you Jordan..
very happy and quick solution..
Awesome Shrujal, glad it helped!