Slick Carousel not working with Foundation 5 and Require JS in Firefox

Question

I'm an inexperienced front-end developer, I am currently using Foundation 5.5 along with Require JS and Slick Carousel http://kenwheeler.github.io/slick/ with smaller pictures so that when they are clicked it goes to the proper slide.

 <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 -->

Here is the page I'm currently working on: https://beyondtells.com/silex/new-sales?vero_id=1@1.com (just make sure to keep the query string or it wont show)

It works beautifully in Chrome, which I have been using, I viewed the page in Firefox/IE and it seems that it is not working right. The images inside the carousel are stacked up against each other vertically, and the plugin doesn't seem to be working.

Answer 1

After spending a lot of time trying to figure out what was wrong. I realized the problem was within require JS. I defined a 'preinit' and required it to be with whatever I needed, the method I used was problematic. Here is an example:

// 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);

While this works fine in Chrome, the CSS was not being loaded even though it can be seen in the dev tools. Therefore I simply linked the css file the normal way. Thank you all for taking the time to read my question.