balex balex - 1 month ago 20
jQuery Question

Create multiple carousels

I want to create three carousels:

$(document).ready(function() {
$('#c1').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: true
});
$('#c2').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
$('#c3').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
});


But when I execute this code, this error message appears:


slick.min.js:17 Uncaught TypeError: Cannot read property 'add' of null


I also tried:

.not('.slick-initialized').slick()


Then it throws no error, but only the first carousel gets created.

Answer

Seems like slickslider can't find an object it needs. Make sure the your ID's (c1,c2,c3) exist in your code.

From the official slickslider-page(http://kenwheeler.github.io/slick/):

<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="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

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

  </body>
</html>

Make sure you don't call the slick() function twice on the same element aswell.