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');
}
});
});
