我根本无法让我的 Slick 滑块工作 [英] I can't get my Slick slider to work at all
问题描述
我正在尝试让一个褪色的、光滑的滑块在我的网站上工作.但我没有运气.这是 Slick:http://kenwheeler.github.io/slick/
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/
如果您向下滚动，您将看到有关如何实施的说明.我附上了我的截图，希望有人能看到我做错了什么.
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>我是 Javascript 和 Jquery 的新手，所以我觉得我在那里搞砸了.
I'm new to Javascript and Jquery so I feel like I'm messing something up there.
当我加载我的页面时，我看到的只是 3 张测试图片，一张在另一张下方.
When I load my page, all I see are the 3 test images, one below the other.
有人知道我做错了什么吗?
Anyone know what I'm doing wrong?
推荐答案
问题出在slide设置(元素查询选择滑块)
The problem is in the slide setting (element query to select the slider)
例如改变:
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
slide: '> div',
cssEase: 'linear'
});
到
$('.fade').slick({
dots: true,
infinite: true,
speed: 700,
autoplay:true,
autoplaySpeed: 2000,
arrows:false,
slidesToShow: 1,
slidesToScroll: 1
});
工作，只是玩弄设置.您将 slide 定义为 >div(div 的中间子级)，所以如果你删除它(默认为 div)，它就可以工作.
Works, just play around with the settings.
You were defining slide as > div (inmediate children of div), so if you remove it (defaults to div), it works.
<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>这篇关于我根本无法让我的 Slick 滑块工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
