Slick.js

Question

无法让 Slick 在我位于 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

的开发站点上工作

图像显示为堆叠的。想不通这个！

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

Answer 1

我转到了您提供的第一个 link，它与您的示例代码相匹配。罪魁祸首是您在页面上的设置。这些不是有效的设置，也是 JS 的不正确语法，因为您在名称中包含了连字符。

如果您在 chrome 或其他浏览器中检查您的控制台，您可能会看到如下错误：未捕获的语法错误：意外的标记 -

这是你的罪魁祸首：

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

如果您将其更改为如下所示，它应该可以正常工作：

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

Slick.js - 图像堆叠

Slick.js - images stacked