'Slick'轮播JQuery代码无法运行/加载

编程问答 2022-06-13

问题描述

尝试使用Slick轮播，并遵循其网站上的“用法”，但没有运气。

我的代码：

    <html>
  <head>
  <title>slick test</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><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></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
      });
      $('.single-item').slick();
    });
  </script>

  </body>
</html>

我认为JQuery有点问题，因为VS代码显示初始化脚本中的错误。

我尝试使用CD的slick版本和较新的JQuery版本，但似乎都无法使用。除了div和“单个项目”脚本中的图像外，这与光滑网站上提供的代码相同。

解决方法

  • 您在CDN内容的代码中缺少'http（s）：//'前缀
  • CDN的便捷教程（链接）。
  • 您将示例代码的一部分放在了未定义的代码中

工作代码：

  <html>
  <head>
  <title>slick test</title>
  <link rel="stylesheet" type="text/css" href="https:///cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  </head>
  <body>

  <div class="your-class">
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        //setting-name: setting-value
      });
      $('.single-item').slick();
    });
  </script>

  </body>
</html>
htmljavascriptjqueryslick.js