Slick Carousel無法在Foundation 5中使用，並且在Firefox中需要JS

Question

我是一個經驗不足的前端開發人員，我目前使用Foundation 5.5以及Require JS和Slick Carousel http://kenwheeler.github.io/slick/和較小的圖片，以便單擊它們時可以轉到正確的幻燈片。

 <div class='block-4-img columns medium-8 large-6' data-equalizer-watch>
    <span class='logo-helper'></span>
    <div class='slick-holder columns large-12'>
        <div class='js-slick slick-system'>

            <div class='slide'>
                <img src={{ app.asset_path ~ '/img/new-sales/slick/slick1.jpg'}}></img>
            </div>

            <div class='slide'>
                <img src={{ app.asset_path ~ '/img/new-sales/slick/slick2.jpg'}}></img>
            </div>

            <div class='slide'>
                <img src={{ app.asset_path ~ '/img/new-sales/slick/slick3.jpg'}}></img>
            </div>

            <div class='slide'>
                <img src={{ app.asset_path ~ '/img/new-sales/slick/slick4.jpg'}}></img>
            </div>

        </div>

        <div class='slick-buttons'>
            <ul>
                <li><img class='slick-button-1 slick-button' src={{ app.asset_path ~ '/img/new-sales/slick/slick1.jpg'}}></img></li><!-- --><li><img class='slick-button-2 slick-button' src={{ app.asset_path ~ '/img/new-sales/slick/slick2.jpg'}}></img></li><!-- --><li><img class='slick-button slick-button-3' src={{ app.asset_path ~ '/img/new-sales/slick/slick3.jpg'}}></img></li><!-- --><li><img class='slick-button slick-button-4' src={{ app.asset_path ~ '/img/new-sales/slick/slick4.jpg'}}></img></li><!-- --> 
        </div>
    </div><!-- end slick holder -->
</div><!-- block-4-img -->

這是我當前正在處理的頁面： https : //beyondtells.com/silex/new-sales?vero_id=1@1.com （請確保保留查詢字符串，否則它不會顯示）

在我一直使用的Chrome瀏覽器中，它的運行非常漂亮，我在Firefox / IE中查看了該頁面，看來它無法正常工作。 輪播中的圖片在垂直方向上相互堆疊，該插件似乎無法正常工作。

Answer 1

在花費大量時間試圖找出問題所在之后。 我意識到問題出在需要JS之內。 我定義了一個“ preinit”，並要求它與我需要的任何東西匹配，我使用的方法是有問題的。 這是一個例子：

// Append and load styles var linkNode = document.createElement("link"); linkNode.rel = "stylesheet"; linkNode.type = "type/css"; linkNode.href = "//cdnjs.cloudflare.com/ajax/libs/sweetalert/0.3.3/sweet-alert.min.css"; document.head.appendChild(linkNode);

盡管這在Chrome中可以正常運行，但是即使可以在開發工具中看到CSS，也無法加載CSS。 因此，我只是簡單地以正常方式鏈接css文件。 謝謝大家花時間閱讀我的問題。