4

我正在为一个项目使用 Foundation 4.3.0，并尝试以最基本的方式设置 Orbit。javascript 和 CSS 似乎正确加载，图像正在加载，所有额外的元素都被插入，等等。但 main<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>

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

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

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

任何想法将不胜感激。

4

4 回答 4

12

我将尽量避免在这里过于冗长..但这是我发现的，虽然我不会称这是一个完整的修复，因为我不确定是什么导致了 css 中的差异，下面的代码解决了问题。

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

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

无论如何，以下是修复：

.orbit-container { height:250px; }  

.orbit-container .orbit-slides-container > * {
  position: relative;
  margin-left: 0;
  float: left;
  height: 100%;
}
于 2013-08-08T18:07:52.097 回答
1 
.orbit-container { height:auto; }  

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

对以前的解决方案进行了一些升级。通过此修改，将更容易在手机和桌面上显示幻灯片。

于 2015-05-28T12:16:37.517 回答
0

你确定图片的网址没问题吗？我有同样的问题，但我的 3 张图片中有 2 张，问题出在 url

于 2013-08-05T21:28:07.297 回答
0

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

于 2013-08-21T13:43:17.433 回答