Javascript 我的 Slick 滑块根本无法工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26290692/
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
I can't get my Slick slider to work at all
提问by Alan Scarpa
I'm trying to get a fading, Slick slider to work on my website. But I'm having no luck. This is Slick: http://kenwheeler.github.io/slick/
我试图让一个褪色的、光滑的滑块在我的网站上工作。但我没有运气。这是光滑的：http: //kenwheeler.github.io/slick/
If you scroll down, you'll see the instructions on how to implement. I've attached my screenshot, so hopefully someone can see what I'm doing wrong.
如果向下滚动，您将看到有关如何实施的说明。我附上了我的截图，所以希望有人能看到我做错了什么。
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/>
</head>
<body>
<div class="fade">
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
</div>
<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="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
slide: '> div',
cssEase: 'linear'
});
});
</script>
</body>
</html>I'm new to Javascript and Jquery so I feel like I'm messing something up there.
我是 Javascript 和 Jquery 的新手，所以我觉得我在那里搞砸了。
When I load my page, all I see are the 3 test images, one below the other.
当我加载我的页面时，我看到的只是 3 个测试图像，一个在另一个下面。
Anyone know what I'm doing wrong?
有谁知道我做错了什么？
回答by Alfonso Pérez
The problem is in the slidesetting (element query to select the slider)
问题出在slide设置（元素查询选择滑块）
For example changing:
例如改变：
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
slide: '> div',
cssEase: 'linear'
});
to
到
$('.fade').slick({
dots: true,
infinite: true,
speed: 700,
autoplay:true,
autoplaySpeed: 2000,
arrows:false,
slidesToShow: 1,
slidesToScroll: 1
});
Works, just play around with the settings.
You were defining slideas > div(inmediate children of div), so if you remove it (defaults to div), it works.
作品，只是玩弄设置。您正在定义slide为> div（div 的中间子代），因此如果您将其删除（默认为div），它就可以工作。
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/>
</head>
<body>
<div class="fade">
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
</div>
<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="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.fade').slick({
dots: true,
infinite: true,
speed: 700,
autoplay:true,
autoplaySpeed: 2000,
arrows:false,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
</body>
</html>