javascript - How to use Slick carousel slider? - Stack Overflow|Programmer puzzle solving

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>

<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>

Share Improve this question edited Feb 10, 2016 at 8:30 Roman 5,6991 gold badge32 silver badges41 bronze badges asked Feb 9, 2016 at 16:55 ShiggyDooDah 5072 gold badges9 silver badges25 bronze badges

1 you have any output in the console? – john Smith Commented Feb 9, 2016 at 16:57

Add a ment |

3 Answers 3

Sorted by: Reset to default 0

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>

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();
});

Programmer puzzle solving

javascript - How to use Slick carousel slider? - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)