0

我是一个没有经验的前端开发人员，我目前正在使用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 中查看了该页面，但它似乎无法正常运行。旋转木马内的图像垂直堆叠在一起，插件似乎无法正常工作。

4

1 回答 1

0

在花了很多时间试图找出问题所在之后。我意识到问题出在require 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 文件。感谢大家花时间阅读我的问题。

于 2015-01-24T23:36:25.863 回答