I really want to be able to use the slick carousel slider by Ken Wheeler, but having difficulties understanding how to use it. i followed the instructions on Ken Wheeler's github but nothing is happening! Can anyone point out where i am going wrong? I have used a couple of tutorials online but still can not get it to work!
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src=".11.0/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.js"></script>
</head>
<body>
<div class="slider demo">
<div> Slide 1 </div>
<div> Slide 2 </div>
<div> Slide 3 </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.demo').slickPlay();
});
</script>
</body>I really want to be able to use the slick carousel slider by Ken Wheeler, but having difficulties understanding how to use it. i followed the instructions on Ken Wheeler's github but nothing is happening! Can anyone point out where i am going wrong? I have used a couple of tutorials online but still can not get it to work!
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.js"></script>
</head>
<body>
<div class="slider demo">
<div> Slide 1 </div>
<div> Slide 2 </div>
<div> Slide 3 </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.demo').slickPlay();
});
</script>
</body>- 1 you have any output in the console? – john Smith Commented Feb 9, 2016 at 16:57
3 Answers
Reset to default 0Have you tried this?
<script type = "text/javascript">
function slider(){
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction: "left"}, 500);
var sc =$(".slider img").size();
var count = 2;
setInterval(function () {
$(".slider #"+count).show("slide",{direction: "right"}, 500);
$(".slider #"+count).delay(5500).hide("slide",{direction: "left"}, 500);
if(count == sc) {
count = 1;
}
else
{
count = count + 1;
}
}, 6500);
}
</script>
Make sure that you are loading the Slick slider's JS and CSS files properly. Try using the CDN links of Slick slider's CSS and JS files.
Also, check your console for more details about the error. This might also due to Jquery error. In that case, use "jQuery" keyword instead of "$".
I have used the Slick slider's CDN JS and CSS links. Now the slick slider is working fine for me.
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
</head>
<body>
<div class="slider demo">
<div> Slide 1 </div>
<div> Slide 2 </div>
<div> Slide 3 </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('.demo').slick({
arrows:1,
dots:1,
cssEase:"ease-out",
autoplay:true});
});
</script>
</body>$(document).ready(function(){
$('.demo').slick();
});