文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Slick.js -图像堆叠

问Slick.js -图像堆叠
EN

Stack Overflow用户
提问于 2015-07-22 19:05:48
回答 1查看 1.9K关注 0票数 1

我无法在http://freeamericaswater.mmartinez.webfactional.com的开发网站上工作。我尝试了各种组合，重新排序js文件，并尝试cdn版本在那里和一个网站上，我所做的测试斯利克，http://slick.mmartinez.webfactional.com。

图像以堆叠的形式出现。我想不出这一招！

代码语言：javascript
复制
<!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>
slick.js
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-23 01:28:35

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

如果您在chrome或其他浏览器中检查您的控制台，可能会看到这样的错误: Uncaught :意外令牌-

这就是你的罪魁祸首：

代码语言：javascript
复制
$('.single-item').slick({
   setting-name: setting-value
});

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

代码语言：javascript
复制
$(".single-item").slick();
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/31571886

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档