How to use Slick carousel slider?
Question
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.com/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>
3 answers
solution1
0 2016-02-09 17:01:03
Have 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>
solution2
0 2019-05-31 08:27:12
$(document).ready(function(){
$('.demo').slick();
});
solution3
0 2022-09-08 07:19:14
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.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.