Zurb Foundation 4.3.0 Slide-Free Orbit

Question

I am using Foundation 4.3.0 for a project and I am trying to configure Orbit in the most basic way. Javascript and CSS seem to load correctly, images load, additional elements are added, etc. But the main <ul> always has a height of 0px. Here is my HTML:

 <div class="row"> <section class="large-12 columns"> <div class="slideshow-wrapper"> <div class="preloader"></div> <ul data-orbit=""> <li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li> <li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li> </ul> </div> </section> </div> 

Here HTML once foundation.orbit.js does its thing:

 <div class="row"> <section class="large-12 columns"> <div class="slideshow-wrapper"> <div class="preloader"></div> <div class="orbit-container orbit-stack-on-small"> <ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;"> <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li> <li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li> <li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li> <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li> </ul> <a href="#" class="orbit-prev">Prev <span></span></a> <a href="#" class="orbit-next">Next <span></span></a> <div class="orbit-slide-number"> <span>1</span> of <span>2</span> </div> <div class="orbit-timer"> <span></span> <div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div> </div> </div> <ol class="orbit-bullets"> <li data-orbit-slide-number="1" class="active"></li> <li data-orbit-slide-number="2" class=""></li> </ol> </div> </section> </div> 

I tried to set explicit width + height on the images, put class="active" on one slide when creating HTML, change various Foundation settings, etc., and nothing works.

When I compare HTML with a live example in Foundation documents, I notice that in the working version, a z-index always set dynamically on slides. There is no z-index on my site. And, of course, ul in the working version has built-in CSS height, which is equal to the height of the slides.

If I manually set the height of ul to 300 pixels, everything looks right, but I do not see the images. If I set div.orbit-container to overflow: visible , I will see the edge of one of the slides to the left of the container.

Any ideas would be highly appreciated.

Answer 1

I will try to avoid excessive verbosity here .. but this is what I found, and although I would not call it a full fix, because I'm not sure what started with the differences in css, the following code solved the problem.

I found this because I have a local environment as well as a dev environment for the site. The local environment worked fine, but the production environment had all the problems you mentioned above.

The first problem, of course, is the created div container setting the height to 0px. This is pretty weird. I manually added the height to the container in css. The reason all the images are hidden is because they are set in the margin-left field: 100% or some kind of large left field, and they are all located absolutely. I'm sorry that I can no longer help, why there are differences in the code, maybe I will find more time for further study, but at the moment it works.

In any case, the following has been fixed:

 .orbit-container { height:250px; } .orbit-container .orbit-slides-container > * { position: relative; margin-left: 0; float: left; height: 100%; } 

Answer 2

 .orbit-container { height:auto; } .orbit-container .orbit-slides-container > * { position: relative; margin-left: 0; float: left; height: 100%; } 

A small update from the previous solution. With this modification, it will be easier to show slide shows on the phone and on the desktop.

Answer 3

Are you sure the image url is ok? I had the same problem but with two of my 3 images and the problem was in the url

Answer 4

I had the same problem and I just found that using separate modules (I use a compass) instead of using foundation.min.css solves the problem if you tried to use base.css (not minyfied)