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.

	// Initiate the slider
		thumbItem: 9,
		thumbMargin: 20,
		galleryMargin: 20,

		// On the LightSlider Load remove the CSS hiding class.						  
		onSliderLoad: function() {  



Leave all Comment