Slick: Slick is not work with jQuery 3 or higher

Created on 1 Feb 2017  路  13Comments  路  Source: kenwheeler/slick

When i use jQuery version 3.0 or higher, slick slider is not working.

picture SalehGladius
👍2

Most helpful comment

<!DOCTYPE html>
<html>

<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html,
    body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
      width: 50%;
      margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }

    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
  </style>
</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>



  <script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>

  <script src="./slick/slick.min.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">

    $(".regular").slick({
      dots: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3
    });

  </script>

</body>

</html>
picture TomislavBatar on 20 Mar 2019
👍4

All 13 comments

Having this issue as well, any update on when this will be compatible with jQuery 3, thanks!

jaydelrosario picture jaydelrosario on 4 Feb 2017

Merged a fix into the new master. You can grab that. There's another issue on this subject if you'd like to learn more about the breaking changes to jQuery.

leggomuhgreggo picture leggomuhgreggo on 4 Feb 2017
❤1

I did grab it, still no luck. Using the master repo, I changed jquery from 2.2.0 to 3.1.0 and the sliders stopped working.

jaydelrosario picture jaydelrosario on 4 Feb 2017
👍1

Can you recreate in a fiddle or codepen?

leggomuhgreggo picture leggomuhgreggo on 4 Feb 2017

https://jsfiddle.net/7gaw3hra/
i didnt change anything except the JS on line 133

jaydelrosario picture jaydelrosario on 4 Feb 2017
😕1

Check the console for errors

leggomuhgreggo picture leggomuhgreggo on 4 Feb 2017

No errors. Works fine when I change it back to 2.2.0.

jaydelrosario picture jaydelrosario on 4 Feb 2017

screen shot 2017-02-04 at 2 21 35 pm

leggomuhgreggo picture leggomuhgreggo on 4 Feb 2017

Anyway it works here with jQuery edge: https://jsfiddle.net/simeydotme/fmo50w7n/

leggomuhgreggo picture leggomuhgreggo on 4 Feb 2017

So I figured out the problem with your implementation. The reason slick broke w/ jquery 3 is because we used on ready which you are using in your code.

$(document).on('ready', function() { ... }

leggomuhgreggo picture leggomuhgreggo on 5 Feb 2017
👍2

Thank you that works! Sorry, I literally pulled the repo and only changed the version of jQuery in the index.html.

jaydelrosario picture jaydelrosario on 5 Feb 2017 
<!DOCTYPE html>
<html>

<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html,
    body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
      width: 50%;
      margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }

    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
  </style>
</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>



  <script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>

  <script src="./slick/slick.min.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">

    $(".regular").slick({
      dots: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3
    });

  </script>

</body>

</html>
TomislavBatar picture TomislavBatar on 20 Mar 2019
👍4

CHANGE JS 

<script type="text/javascript">

    $(".regular").slick({
      dots: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3
    });

  </script>
TomislavBatar picture TomislavBatar on 20 Mar 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

barzev picture barzev  路  3Comments
xitongzou picture xitongzou  路  3Comments
msavov picture msavov  路  3Comments
crstauf picture crstauf  路  3Comments
ericestes picture ericestes  路  3Comments