Zurb Foundation 4.3.0 Orbit没有显示幻灯片

Question

我正在使用Foundation 4.3.0进行项目，并试图以最基本的方式设置Orbit。 javascript和CSS似乎正确加载，图像正在加载，所有额外的元素都插入，等等。但主<ul>的高度始终为0px。 这是我的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>

这是HTML一旦foundation.orbit.js做了它的事情：

<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>

我试图在图像上放置显式的宽度+高度，在生成HTML时将class="active"放在一张幻灯片上，更改各种Foundation设置等，似乎没有任何效果。

当我将HTML与Foundation文档中的实例进行比较时，我注意到在工作版本中，始终在幻灯片上动态设置z-index 。 在我的网站上，没有设置z-index 。 当然，工作版本中的ul具有内联CSS高度，该高度等于幻灯片的高度。

如果我手动将ul高度设置为300px，一切看起来都正确，除了我看不到图像。 如果我将div.orbit-container设置为overflow: visible ，我将看到容器左侧的一个幻灯片的边缘。

任何想法将不胜感激。

Answer 1

我将尽力避免在这里过于冗长..但这是我发现的，虽然我不会称之为完全修复，因为我不确定是什么启动了css中的差异以下代码解决了问题。

我发现这是因为我有一个本地环境以及该网站的开发环境。 当地环境运作良好，但生产环境有上面提到的所有问题。

第一个问题当然是生成的容器div将高度设置为0px。 这很奇怪。 我手动将高度添加到css中的容器中。 所有图像隐藏的原因是它们被设置为左边距：100％或一些大的左边距，它们都是绝对定位的。 我希望我能更多地帮助解决为什么存在代码差异，也许我会找到更多时间进一步调查，但现在它的工作。

无论如何，以下是修复：

.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%;
}

从以前的解决方案稍微升级。 通过此修改，可以更轻松地在手机和桌面上显示幻灯片。

Answer 3

你确定图像的网址是否正常？ 我有同样的问题，但我的3张图片中有2张，问题出现在网址中

Answer 4

我遇到了同样的问题，我刚刚发现使用单个模块（我使用指南针）而不是使用foundation.min.css解决了问题，你试过使用foundation.css（不是minyfied）吗？