为什么 slick slider not return 在不提供任何功能的情况下出错？

Question

我正在尝试在我的应用程序中实现灵活的滑块，但它根本没有效果。控制台中没有返回任何错误，对我来说一切正常。

<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>

我需要保留 4.01，希望这不是问题所在。所有文件都加载正常。为什么滑块不显示？

Answer 1

既然您已经修复了问题中的脚本顺序，那么问题出在您实例化 slick() 滑块的方式上。您在要滑动的元素上调用它，而不是在单个包含元素上调用它。试试这个：

$('.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>

为什么 slick slider not return 在不提供任何功能的情况下出错？

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

jquery

slick.js