Menu
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>I'm new to Javascript and Jquery so I feel like I'm messing something up there.
When I load my page, all I see are the 3 test images, one below the other.
Anyone know what I'm doing wrong?
451
You can also link to another Pen here (use the . css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
The problem is in the slide setting (element query to select the slider)
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 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
