I know this has been asked a lot but I've read through loads of other threads related to Slick yet none of the suggested fixes seem to be working for me.
I've followed the instructions on http://kenwheeler.github.io/slick/ but am just left with a page that has three images stacked on top of each other and doesn't remotely resemble a carousel. I have a feeling that it's because I haven't added anything to my main css stylesheet but have no idea how I'm supposed to style it to turn it from three static images into a carousel! Does anyone have any ideas? The code from the html page is below. Does anyone know what I need to do to the 'fade' div class in order to get it working? Or is not a stylesheet issue?
Any help would be massively appreciated. Thank you!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title will go here</title>
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<!-- // Add the new slick-theme.css if you want the default styling -->
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
</head>
<body>
<section id="magazine">
<div class="container group">
<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>
</div>
</section>
<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() {
$('.fade').slick({
dots: true,
infinite: true,
speed: 700,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
</body>
</html>
Load your page and 'View Source', try to see if any of your files or stylescripts are missing. Just click on the links and see if it brings you to the source files.
If you're missing any of them that explains your problem. You can try what Samar mentioned.
If all the files are present and linked, check your JavaScript console and if there are any errors, maybe that would be a hint to your problem. Otherwise, I can't find anything glaring in your markup.