我不能让我的Slick滑块工作 [英] I can't get my Slick slider to work at all
问题描述
我试图得到一个褪色，Slick滑块在我的网站上工作。但我没有运气。这是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?
推荐答案
问题出现在幻灯片滑块）
例如更改：
$('.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屋！
