javascript 光滑的旋转木马合并不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23723281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick carousel incorporation not working
提问by user3649848
I am trying to incorporate the slick carousel into my website but I am having a lot of trouble on what feels like the most basic of levels (I am a complete rookie with js). I am aiming to have 3 carousels stacked on top of each other each showing one image at a time.
我正在尝试将光滑的旋转木马合并到我的网站中，但是我在最基本的级别上遇到了很多麻烦（我是一个完整的 js 新手）。我的目标是将 3 个旋转木马堆叠在一起，每个旋转木马一次显示一张图像。
Here is the JS Fiddle: http://jsfiddle.net/dpL2Y/1/embedded/result/
这是 JS 小提琴：http: //jsfiddle.net/dpL2Y/1/embedded/result/
Below is my code:
下面是我的代码：
Thanks in advance
提前致谢
<html>
<head>
<meta Charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/Anderson.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
</head>
<body>
<nav>
<ul>
<li><a href="fmf.html">Fantastic Mr Fox</a></li>
<li>The Life Aquatic</li>
<li>Home</li>
<li>The Grand Budapest Hotel</li>
<li>Moonrise Kingdom</li>
</ul>
</nav>
<div class="top">
<div><img src="imgs/lifehead.png"></div>
<div><img src="imgs/moonhead.png"></div>
<div><img src="imgs/foxhead.png"></div>
<div><img src="imgs/budahead.png"></div>
</div>
</div>
<div id="torso"></div>
<div id="legs"></div>
<footer></footer>
<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(){
$('.top').slick({
setting-name: setting-value
});
});
</script>
</body>
回答by Christian
setting-name: setting-valueis just extra, you need to erase it.
setting-name: setting-value只是多余的，您需要将其擦除。
It's only an example that the creator put. You should do something like this:
这只是创作者提出的一个例子。你应该做这样的事情：
$(document).ready(function(){
$('.top').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1
});
});
回答by flowna
I know the thread is quite old, however I am struggling with slick as well.
我知道这个线程已经很老了，但是我也在为光滑而苦苦挣扎。
First off in your html there are many errors (two closing body tags, a closing div tag where non belong,..)
首先在你的 html 中有很多错误（两个结束的 body 标签，一个不属于的结束 div 标签，..）
Here's a clean and almost working jsfiddle of your code. The slick works (you can slide the divs using your mouse). However the Slick control elements don't seem to render (and this is where I'm always hanging).
这是您的代码的干净且几乎可以正常工作的 jsfiddle。光滑的作品（您可以使用鼠标滑动 div）。然而，Slick 控件元素似乎没有呈现（这就是我一直挂着的地方）。
<body>
<nav>
<ul>
<li><a href="fmf.html">Fantastic Mr Fox</a></li>
<li>The Life Aquatic</li>
<li>Home</li>
<li>The Grand Budapest Hotel</li>
<li>Moonrise Kingdom</li>
</ul>
</nav>
<div class="top">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
The JS:
JS：
$(document).ready(function () {
$('.top').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
I added the the css, jquery and slick files using external resources (left hand side).
我使用外部资源（左侧）添加了 css、jquery 和 slick 文件。
Assuming you already gave up or fixed the issue, maybe this helps others to get their slick working.
假设你已经放弃或解决了这个问题，也许这有助于其他人顺利工作。
回答by Ken Wheeler
The example you've shown is locally referencing css and js that aren't available. In order for this to work properly, you need to put the /slick folder in your root directory. A good way to troubleshoot this would be to open your developer console to make sure the required resources are loading.
您展示的示例在本地引用了不可用的 css 和 js。为了使其正常工作，您需要将 /slick 文件夹放在根目录中。解决此问题的一个好方法是打开您的开发者控制台以确保加载所需的资源。
回答by motogoat
You need to add http: in front of the //code.jquery.com...
(http://code.jquery.com...)
需要在//code.jquery.com...( http://code.jquery.com...)前面加上http:
