Scot Ranney • February 22, 2024
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>