0

私は経験の浅いフロントエンド開発者です。現在、Require JS とSlick Carousel http://kenwheeler.github.io/slick/と一緒にFoundation 5.5を使用しており、小さい画像をクリックすると適切なスライドに移動します。 . 

 <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 に答える