Question

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

我已按照Git页面上的说明操作：https://github.com/kenwheeler/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>

Answer 1

它无法正常工作的原因是因为您正在从文件中运行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上下文而不是从HD上的文件运行您的代码。

光滑的轮播不起作用

1 个答案: