Veteran Owned & Operated 
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| <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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| .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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| jQuery(document).ready(function($) { | |
| $('.bxslider').bxSlider({ | |
| onSliderLoad: function(){ | |
| $(".bxslider-wrap").css("visibility", "visible"); | |
| } | |
| }); | |
| }); |
That’s it! Hope this helps!
Have Questions? I can help! Get Started
