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>

一旦foundation.orbit.js执行其操作，就会出现HTML：

<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"放在一张幻灯片上，更改各种基础设置等，似乎没有任何效果。

当我将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）？

Zurb Foundation 4.3.0 Orbit没有显示幻灯片

4 个答案: