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!
Mohsin says
Thank You so much 🙂
Somedutta Ghosh says
Thanks! That helped.
Alex says
Thanks, super solution!
Jordan says
Glad it helped Alex!
Michelle says
This is probably a crazy question but… where does .bxslider-wrap { visibility: hidden; } . In the html doc? in a js file?
Jordan says
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!
Sean Vandenberg says
Thanks, Jordan! This is a very simple and smart solution. Appreciate you sharing it.
Jordan says
Sure thing Sean!
simplen says
you da man
Jordan says
Thanks! Glad it helped you!
Anaz Bilal says
Very thankzz Jordan ..
Arjen DeVries says
Simple and elegant! Thank you!
Jordan says
Sure thing! Glad it helped you out!
Chris says
Hi Jordan,
Thank you. This is a nice, quick solution.
Worked perfectly!
Jordan says
Sure thing!
Shrujal Goswami says
Thank you Jordan..
very happy and quick solution..
Jordan says
Awesome Shrujal, glad it helped!