【发布时间】：2015-07-22 19:05:48
【问题描述】：
无法让 Slick 在我的开发网站 http://freeamericaswater.mmartinez.webfactional.com 上工作。我已经尝试了各种重新排序 js 文件的组合，并在那里和我为测试 Slick 的网站上尝试了 cdn 版本，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>© 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