Orbit-Slider displays all images stacked vertically when the browser is loaded for the first time

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&amp;text=Slide Image 1" alt="slide image" class="active" style="z-index: 4; margin-left: 0%;">
              <img src="http://placehold.it/1200x500&amp;text=Slide Image 2" alt="slide image" class="" style="z-index: 2; margin-left: 100%;">
              <img src="http://placehold.it/1200x500&amp;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,

Solution

Since Orbit executes through Javascript, before it kicks in you might see your images or content all stacked on top of each other. To avoid this you can make use of a property of Orbit: it adds a class of .orbit once it executes, meaning you can target your div#featured with specific styles that will be overridden when the class is added.

For example, if we want Orbit to load a simple light grey screen with a spinner, the CSS would look like this:

CSS:

#featured { background: url(spinner.gif) center center #f4f4f4 no-repeat; height: 300px; }
#featured img { display: none; }

#featured.orbit { background: none; }
#featured.orbit img { display: block; }

We hide the images by default, and give the #featured block a fixed height and background with a spinner. Once Orbit loads the images are displayed and we remove that background.

Taken from: http://foundation.zurb.com/docs/v/3.2.5/orbit.php