jQuery slick carousel plugin not working

Asked 18/5, 2016 at 19:37 Answered 12/8, 2020 at 2:59

I don't get the slick carousel plugin to work. I already read all the threads here but I'm sure everthing is fine. However it doesn't seems so :D. Here is my code:

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

  </head>
  <body>

  <div class="test">
          <div><img id="" width="300" height="200" src=""> </div>
          <div><img id="" width="300" height="200" src=""> </div>
          <div><img id="" width="300" height="200" src=""> </div>
  </div>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://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(){
      $('.test').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

I'm sure everything I need is loaded, here is a screen from the chrome dev tool

Screen

I also tried to include the css through cdn.jsdelivr.net.

Wristwatch answered 18/5, 2016 at 19:37 Comment(0)

For the slick carousel plugin to work you need to set a few VALID settings.Yours is not working because of setting-name: setting-value.Here's a working example.All the references are added via the CDN so you can just copy and paste it as is in your page and it will work:

<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).on('ready', function () {
            $(".regular").slick({
                dots: true,
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 3
            });
        });
  </script>
</head>
<body>
    <section class="regular slider">
        <div>
            <img src="http://placehold.it/350x300?text=1">
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=2">
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=3">
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=4">
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=5">
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=6">
        </div>
    </section>
</body>

Output:

Schoening answered 19/5, 2016 at 5:8 Comment(3)

This doesn't work for me. It seems like calling slick() does not do anything at all. No error or anything. Everything else seems to be in order, but nothing happens. – Oswell 12/9, 2018 at 23:8

It doesn't work for me too. Looks like now in 2019 it's not supportd with browsers – Sophiesophism 30/1, 2019 at 20:24

Possibly, but luckily we hundreds of other js carousel plug-ins available, right?@Sophiesophism – Schoening 1/2, 2019 at 5:23

Please end the Slick js file and your plugin trigger code right before ending body tag. Thank you

Entwistle answered 12/8, 2020 at 2:59 Comment(1)

Hi @Mohammed, your answer is actually a comment since it does not answer the question. Please consider deleting your answer and adding a comment to the question instead. – Kochi 12/8, 2020 at 5:39

Recommended topics

Hot tags