I've been trying to get a simple implementation of the Slick Carousel working.
I've followed the instructions at the Git page: https://github.com/kenwheeler/slick
Here is my code. Can anyone see a problem? Does anyone have a simple working code sample for slick?
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
</head>
<body style="background-color: lightblue">
<div class="your-class">
<div><p>test1</p></div>
<div><p>test2</p></div>
<div><p>test3</p></div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick();
});
</script>
</body>
</html>
The reason it's not working is because you are running your html from file. This means that the url scheme being used for your script links is
file:
instead of
http:
so your CDN links are being resolved as
file://code.jquery.com/jquery-1.11.0.min.js
which is clearly incorrect.
Either hard-wire the scheme to http:
by updating all the links to contain a scheme:
<link rel="stylesheet" type="text/css"
href="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
or run your code from an http context instead of from a file on your HD.
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