Remove FOUC (flash of unstyled content) on jQuery Lightslider Carousel

When more than one slide is used on a lightslider slider/carousel, the slide images are initially loaded underneath each other and jump into place which causes the layout to jump around which is known as a flash of unstyled content or FOUC.

There is a CSS class name that already ships with the lightslider CSS ‘cS-hidden’

.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}

Add this class to your slider markup on the list element…

<ul id="light-slider" class="image-gallery cS-hidden">

Now the slider will be hidden, bring it back by removing the Class on the onSliderLoad callback in jQuery.

jQuery(document).ready(function($){    
   
	// Initiate the slider
	$('.image-gallery').lightSlider({ 
		gallery:true, 
		item:1, 
		auto:false, 
		loop:true, 
		thumbItem: 9,
		thumbMargin: 20,
		galleryMargin: 20,

		// On the LightSlider Load remove the CSS hiding class.						  
		onSliderLoad: function() {  
			
			$('.image-gallery').removeClass('cS-hidden');
			
         } 
	});

});

ref