I use Zurb Fondation Framework.
The framework comes with a orbit image slider.
The slider is pretty nice, but I cannot troubleshoot one problem:
When the page(with the slider) is loaded for the first time, all images in the slider appear stacked vertically for 1-2 seconds. Then the slider loads and it looks ok.
Please suggest ideas to make the slider display properly when the browser is loaded for the first time.
Slider code:
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-12 hide-for-small">
<div class="orbit-container"><div id="featured" data-orbit="" class="orbit-slides-container" style="height: 417px;">
<img src="http://placehold.it/1200x500&text=Slide Image 1" alt="slide image" class="active" style="z-index: 4; margin-left: 0%;">
<img src="http://placehold.it/1200x500&text=Slide Image 2" alt="slide image" class="" style="z-index: 2; margin-left: 100%;">
<img src="http://placehold.it/1200x500&text=Slide Image 3" alt="slide image" class="" style="z-index: 2; margin-left: 100%;">
</div><a href="#" class="orbit-prev"><span></span></a><a href="#" class="orbit-next"><span></span></a><div class="orbit-timer paused"><span></span><div class="orbit-progress" style="width: 0%;"></div></div><div class="orbit-slide-number"><span>1</span> of <span>3</span></div><div class="orbit-bullets-container"><ol class="orbit-bullets"><li data-orbit-slide="0" class="active"></li><li data-orbit-slide="1" class=""></li><li data-orbit-slide="2" class=""></li></ol></div></div>
</div>
</div>
Zurb Foundation version: 5.0
Thanks,