CODEWITHSUNDEEP
slick.js
MMSI
MMSI

Reputation: 13

Slick.js - images stacked

Can't get Slick to work on my dev site at http://freeamericaswater.mmartinez.webfactional.com. I've tried various combinations of re-ordering the js files and trying the cdn versio on there and on a site I made to test Slick, http://slick.mmartinez.webfactional.com

The images show up as stacked. Can't figure this one out!

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >

<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free America's Water</title>

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/foundation-icons.css">

  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

  <script src="js/vendor/modernizr.js"></script>




</head>

<!--BODY-->
<body>
  <div class="contain-to-grid sticky">
    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name">
          <a href="#"><h1>Free America's Water</h1></a>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"></a>
        </li>
      </ul>
    </nav>
  </div>


<div class="single-item">
  <div><img src="http://freeamericaswater.mmartinez.webfactional.com/img/slide1.png" alt="slide 1" /></div>
  <div><img src="http://freeamericaswater.mmartinez.webfactional.com/img/slide2.png" alt="slide 2" /></div>
  <div><img src="http://freeamericaswater.mmartinez.webfactional.com/img/slide3.png" alt="slide 3" /></div>
  <div><img src="http://freeamericaswater.mmartinez.webfactional.com/img/slide4.png" alt="slide 4" /></div>
</div>



<!--TAKE ACTION-->
  <div class="row take-action">
  <div class="small-12 columns text-center">
    <h2>Take action today!</h1>
    <div class="row">
      <div class="small-10 columns small-centered text-center">        
        <p>Together, we can Free America's Water from being a drain on our wallets and our natural resources</p>
        <p>We are a not-for-profit initiative whose mission to create awareness of the staggering cost and environmental impact of disposable bottle water and to encourage people to enjoy clean delicious tap water in refillable bottles.</p>
        <p>On our site you'll find links to all the allies you need. Use our graphic assets and common-sense guides to take action in your community, on your campus, and at your workplace.</p>

      </div>
    </div>
  </div>
</div>
<!--END OF TAKE ACTION-->

<!--PROMOTE-->
<ul class="tabs" data-tab>
    <li class="tab-title active"><a href="#panel1-1">Tab 1</a>
    </li>
    <li class="tab-title"><a href="#panel1-2">Tab 2</a>
    </li>
    <li class="tab-title"><a href="#panel1-3">Tab 3</a>
    </li>
    <li class="tab-title"><a href="#panel1-4">Tab 4</a>
    </li>
</ul>
<div class="tabs-content">
    <div class="content active" id="panel1-1">
        <p>First panel content goes here...</p>
    </div>
    <div class="content" id="panel1-2">
        <p>Second panel content goes here...</p>
    </div>
    <div class="content" id="panel1-3">
        <p>Third panel content goes here...</p>
    </div>
    <div class="content" id="panel1-4">
        <p>Fourth panel content goes here...</p>
    </div>
</div>
<!--END OF PROMOTE-->

<!--FREE STICKERS-->
<div class="free-stickers">

    <h2>Get your FREE stickers!</h1>
    <p>Just fill out this simple form and we'll ship them right away </p>
    <!--Form-->
    <div class="row">
    <form>
      <div class="small-6 column small-centered">

        <div class="row">
          <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;">
            <input type="text" name="First Name" placeholder="First Name" aria-label="First Name">
          </div>
          <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;">
            <input type="text" name="Last Name" placeholder="Last Name" aria-label="Last Name">
          </div>
          <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;">
            <input type="text" name="Email" placeholder="Email" aria-label="Email">
          </div>
        </div>

        <div class="row">
          <div class="small-12 columns" style="padding-left: .1375em; padding-right: 0px;">
            <input type="text" name="Street Address" placeholder="Street Address" aria-label="Street Address">
          </div>
        </div>

        <div class="row">
          <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;">
            <input type="text" name="City" placeholder="City" aria-label="City" style="padding-left: .1375em; padding-right: 0px;">
          </div>
          <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;">
            <input type="text" name="State" placeholder="State" aria-label="State" style="padding-left: .1375em; padding-right: 0px;">
          </div>
          <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;">
            <input type="text" name="Zip Code" placeholder="Zip Code" aria-label="Zip Code" style="padding-left: .1375em; padding-right: 0px;">
          </div>
        </div>

        <div class="row">
          <div class="small-12 columns" style="padding-left: .1375em; padding-right: 0px;">
            <a href="#" class="button expand">Submit</a>
          </div>
        </div>

      </div>

    </div>

</div>
<!--END OF FREE STICKERS-->

<!--FOOTER-->
<footer class="footer">
    <p>&copy; 2015 The Monday Campaigns, Inc.</p><i class="fi-[icon]"></i>
    <p>Privacy Policy | Terms of Use | Disclaimer</p>
    <ul class="inline-list social">
        <a href="#"><i class="fi-social-facebook"></i></a>
        <a href="#"><i class="fi-social-twitter"></i></a>
        <a href="#"><i class="fi-social-instagram"></i></a>
      </ul>

</footer>
<!--END OF FOOTER-->



<script src="/js/vendor/jquery.js"></script>
<script src="/js/vendor/fastclick.js"></script>
<script src="/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

   <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.single-item').slick({
        setting-name: setting-value
      });
    });
  </script>

</body>
</html>

Upvotes: 1

Views: 1993

Answers (1)

Nick Goodrum
Nick Goodrum

Reputation: 401

I went to the first link you provided and that matches your example code. The culprit is in your settings for slick on the page. Those aren't valid settings and also incorrect syntax for JS since you included hyphens in the name.

If you check your console in chrome or other browser you will probably be seeing an error like this: Uncaught SyntaxError: Unexpected token -

This is your culprit:

$('.single-item').slick({
   setting-name: setting-value
});

If you change it to just be the below it should work fine:

$(".single-item").slick();

Upvotes: 1

Related Questions