CSS: Stop Flash of Unstyled Content With JQUERY

If unstyled content flashes up before eveything in the page settles down, try this.

Case: A slider that briefly shows all slides before working.

Container: The container for the slide container should be what the size of the slides will be once rendering is complete so we don't get page shift.

<div style="height: 200px; width: 500px;">
	<div class="slider" style="display: none;">...</div>
</div>

Jquery: After we show the element then we call the script (in this case bxslider) with it's settings and such.

<script>
$(document).ready(function(){
	  $('.slider').show().bxSlider({
		slideWidth: 160,
		minSlides: 2,
		maxSlides: 5,
		preloadImages: 'all'
	  });
});
</script>