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

Question

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,

Answer 1

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

Answer 2

Thought I'd post an updated answer for Foundation 6.

Currently, the example code in the docs are as follows:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
<ul class="orbit-container">
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
<li class="is-active orbit-slide">
  <div>
    <h3 class="text-center">1: You can also throw some text in here!</h3>
    <p class="text-center">Achieve an animation-free Orbit with the data attribute data-use-m-u-i="false"</p>
    <h3 class="text-center">This Orbit slider does not use animations.</h3>
  </div>
</li>

That is the code up to the first slide.

To eliminate this stacking effect I just hid all slides but the first.

.orbit-slide {
  display: none;
}

.orbit-slide.is-active {
  display: block;
}

The other slides appear as the script explicitly sets them to display: block;

Answer 3

For Foundation 6, I combined the other Patrick's answers into one and it loads perfectly.

.orbit-slide { 
  opacity: 0;
  display:none;
} 
.orbit-slide.is-active { 
  opacity: 1; 
  display: block;
}

Just using opacity loaded blank space below the carousel which looked wonky.

Edit: Since I only had two slides in my carousel, it appeared to work, but this shows the last slide and freezes the carousel. Still looking for a solution and jquery show/hide is not it...