js创建多个旋转木马

我想创建三个旋转木马:

$(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
        });
     });

但是当我执行这段代码时，出现了这个错误信息:

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

我也试过这个:

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

则不抛出错误，但只创建第一个carousel。

你们有什么想法吗?

似乎sliickslider找不到它需要的对象。确保您的ID (c1,c2,c3)存在于您的代码中。

来自官方滑块页面(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>

确保不要在同一个元素上两次调用slick()函数。

如果我们想要使用的每个旋转木马的设置相同，我会建议使用单个类或id的另一种解决方案:

$(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
    });
  }); 
});

相关内容

最新更新

热门标签：