admin管理员组

文章数量:1420145

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 this here:

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

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

Do you guys have any ideas? Thanks for advance.

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 this here:

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

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

Do you guys have any ideas? Thanks for advance.

  • javascript
  • jquery
  • html
  • web
  • slick.js
Share Improve this question edited Jun 4, 2020 at 12:52 Doruk Eren Aktaş 2,33710 silver badges23 bronze badges asked Oct 18, 2016 at 8:32 balexbalex 2832 gold badges7 silver badges18 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

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./jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery./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.

I will suggest another solution with single class or id if our settings are the same for each carousel we want to use: 

$(document).ready(function(){
var myCarousel = $(".carousel");
myCarousel.each(function() {        
    $(this).slick({
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 7 * 1000,
        mobileFirst: true,
        arrows: false
    });
  }); 
});

本文标签： javascriptSlickjs create multiple carouselsStack Overflow

版权声明：本文标题：javascript - Slick.js create multiple carousels - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745324306a2653518.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。