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）嗎？