javascript - 光滑的旋转木马不工作

标签 javascript jquery html

我一直在尝试让 Slick Carousel 工作的简单实现。

我已按照 Git 页面上的说明进行操作:https://github.com/kenwheeler/slick

这是我的代码。谁能看出问题?有人有 slick 的简单工作代码示例吗?

<html>
    <head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
    </head>
    <body style="background-color: lightblue">

    <div class="your-class">
        <div><p>test1</p></div>
        <div><p>test2</p></div>
        <div><p>test3</p></div>
    </div>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.your-class').slick();
        });
    </script>

    </body>
</html>

最佳答案

它不起作用的原因是因为您正在从文件运行 html。这意味着用于您的脚本链接的 url 方案是

file:

代替

http:

因此您的 CDN 链接被解析为

file://code.jquery.com/jquery-1.11.0.min.js

这显然是不正确的。

通过更新所有链接以包含方案,将方案硬连接到 http::

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

或者从 http 上下文而不是从硬盘上的文件运行代码。

关于javascript - 光滑的旋转木马不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25985501/

相关文章:

javascript - 我如何推迟像 jquery Deferred 这样的 ES6 promise?

javascript - 使用jcanvas绘制图层: performance optimization

javascript - 错误的 CSS 滚动

javascript - JSON 元素是否可以以 - 开头并在 javascript 中被引用?

jquery - 哈希 anchor 在点击时隐藏内容

html - 在 css 中悬停和过渡期间更改文本不透明度

javascript - 使用 javascript 动态加载元素的性能?

JQuery 表排序器 : How to show the arrows on one column only

javascript - 太棒了 : Use space as delimiter for multiple values auto suggestion

html - 您可以使用 mailto 链接来回复电子邮件并保留线程吗?