Why does slick slider not return errors while not providing any functionality?

问题: I am trying to implement slick slider into my application, but it has not effect at all. There is no error returned in the console and everything looks OK to me....

问题:

I am trying to implement slick slider into my application, but it has not effect at all. There is no error returned in the console and everything looks OK to me.

<html>
    <head>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
      <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
    </head>
    <body>
      <div class="variants" style="cursor:pointer;border:1px solid #CDCDCD;width:192px; height:223px;float:left;">
        test
      </div>
      <div class="variants" style="cursor:pointer;border:1px solid #CDCDCD;width:192px; height:223px;float:left;">
        test
      </div>
      <div class="variants" style="cursor:pointer;border:1px solid #CDCDCD;width:192px; height:223px;float:left;">
        test
      </div>
      <div class="variants" style="cursor:pointer;border:1px solid #CDCDCD;width:192px; height:223px;float:left;">
        test
      </div>
      
      <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
     
      <script type="text/javascript">
        $(document).ready(function() {
          $('.variants').slick({
            infinite: true,
            slidesToShow: 2,
            slidesToScroll: 2
          });
        });
      </script>

    </body>
    </html>

I need to keep 4.01 in place and hope this is not the issue. All files are loaded OK. Why is the slider not showing?


回答1:

Now that you have fixed the order of scripts in your question the issue is due to how you instantiate the slick() slider. You're calling it on the elements to slide instead of on a single containing element. Try this instead:

$('.variants-container').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});
html,
body {
  padding: 20px;
  background-color: #CCC;
}

.variants {
  cursor: pointer;
  border: 1px solid #CDCDCD;
  width: 192px;
  height: 223px;
  float: left;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="variants-container">
  <div class="variants">test</div>
  <div class="variants">test</div>
  <div class="variants">test</div>
  <div class="variants">test</div>
</div>

  • 发表于 2018-12-25 15:46
  • 阅读 ( 190 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除