Menu icon Foundation
Orbit Content Slider does not load well

I'm not sure if this is just me or I'm missing something very basic. I tried a basic content slider with orbit with some sample code right from foundation's docs, when the page loaded it was just a small bar with all the navigational elements, here is the code:

http://cdpn.io/bxKJD

This same slider worked with images perfectly, since this works with images and not with plain content, I tried to trick orbit by putting in a 1px X 1px image in the beginning of the 1st slide (img immediately after the first li element), and voila ..... everything worked just like it should. here is the code:

http://cdpn.io/dkjar

Is this a Bug or am I doing something wrong in the first place?

Thanks,
Asif

Orbitcontentslider

I'm not sure if this is just me or I'm missing something very basic. I tried a basic content slider with orbit with some sample code right from foundation's docs, when the page loaded it was just a small bar with all the navigational elements, here is the code:

http://cdpn.io/bxKJD

This same slider worked with images perfectly, since this works with images and not with plain content, I tried to trick orbit by putting in a 1px X 1px image in the beginning of the 1st slide (img immediately after the first li element), and voila ..... everything worked just like it should. here is the code:

http://cdpn.io/dkjar

Is this a Bug or am I doing something wrong in the first place?

Thanks,
Asif

Parker Gibson over 5 years ago

Was having a similar issue and have seen many other posts like this. I found a "fix" for mine that's really just a work-around here... http://foundation.zurb.com/forum/posts/1635-orbit-inside-of-reveal-modal

Had to add a min-height to container in css like so:

.orbit-container {
    min-height: 490px;
}

Far from ideal for responsive design, but at least it got it working. Using media query to set different min-height for mobile.

Shawn Hansen over 5 years ago

I've had the same issue and had to add the following to my custom javascript:

 // Fix orbit height issue
setTimeout(function() {
  $(document).resize();
}, 1000);

Parker Gibson over 5 years ago

@Shawn, very interested in your solution, but I'm JS handicapped. Added it to the bottom of my page like below with no results. Am I doing it wrong?

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    <script>
    // Fix orbit height issue
    setTimeout(function() {
    $(document).resize();
    }, 1000);
    </script>

Asif over 5 years ago

I think the 1px X 1px image works for me for now,

the document's resize does work, but I guess if I can do without it the better. whenever this is fixed I just need to remove the image file.

Rafi Benkual over 5 years ago

Hi Asif,
We just merged a pull request that should help solve this. https://github.com/zurb/foundation/pull/4436
It's in the master branch now, and will be released in 5.2 in 7 days.