Question

嘿伙计我有这个HTML代码

<!DOCTYPE html>
<html>
 <head>

  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>

 </head>

<body>

    <div class="slider">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

   <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

   <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

   <script src="main.js"></script>


</body>
</html>

和这个JS代码

$(document).ready(function () {
  prompt("Prompt 1");

  $('.slider').slick({

  });

  prompt("Prompt 2");

});

当我在浏览器（Chrome和Edge）中对此进行测试时，似乎没有加载Slick插件，因为第二个提示从未显示，而 .slider 中的内容是另一个元素

然而，当我在plunker中复制并粘贴这两个文件时，每件事都显得很完美。知道为什么会这样吗？

Answer 1

我只是想通了。我的链接标记和三个脚本之一中没有包含 https：。 Plunker能够加载文件，但如果没有 https：

，浏览器就无法加载

解决方案：

而不是

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>

添加 https：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>

第二个脚本标记

相同

Answer 2

我发现这是正确的网址 https://cdn.jsdelivr.net/npm/slick-carousel-latest@1.9.0/slick/slick.min.js

Slick Slider未在浏览器中加载

2 个答案: