jQuery slick carousel plugin not working

jquery plugins carousel slick.js

25,063

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:

25,063

Author by

MolteNolte

Updated on August 12, 2020

Comments

MolteNolte almost 4 years

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.

mcv over 5 years

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.
yestema over 5 years

It doesn't work for me too. Looks like now in 2019 it's not supportd with browsers
Denys Wessels over 5 years

Possibly, but luckily we hundreds of other js carousel plug-ins available, right?@yestema
Leonard almost 4 years

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.