'Slick'轮播JQuery代码不functioning/loading

Question

尝试使用 Slick 轮播，严格按照他们网站上的 'usage' 进行操作，但没有成功。

我的代码：

    <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 代码在初始化脚本中显示错误。

我已经尝试使用 slick 的 CDN 版本和更新版本的 JQuery，但似乎都不起作用。除了 div 和 'single item' 脚本中的图像外，这与 slick 网站上提供的代码相同。

Answer 1

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

'Slick'轮播JQuery代码不functioning/loading

'Slick' carousel JQuery code not functioning/loading

javascript

html

jquery

slick.js