滑动旋转木马不工作

Slick Carousel Not Working

本文关键字：工作 旋转木马      更新时间：2023-09-26

我一直在尝试让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上下文而不是从HD上的文件运行代码。

相关文章：