Javascript 滑溜转盘_Javascript_Jquery_Html_Npm_Slick.js

Javascript 滑溜转盘

javascript jquery html npm

Javascript 滑溜转盘,javascript,jquery,html,npm,slick.js,Javascript,Jquery,Html,Npm,Slick.js,我正试图在一个网站上建立一个圆滑的旋转木马。作为一个测试，我首先尝试直接从slick站点使用代码在空白页面上创建一个。似乎在更新到http的js链接时也无法识别javascript:。以下是HTML： <head> <title>My Now Amazing Webpage</title> <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1

我正试图在一个网站上建立一个圆滑的旋转木马。作为一个测试，我首先尝试直接从slick站点使用代码在空白页面上创建一个。似乎在更新到http的js链接时也无法识别javascript:。以下是HTML：

<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
</head>
<body>

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

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

</body>

我是否遗漏了一些应该添加的内容，以便滑动转盘能够初始化并正常工作？

它似乎对我有效。
我只是加了点，这样更容易看

我还通过https加载了css和脚本，以便在这里工作

单击“运行代码段”查看


我现在的精彩网页
测试1
测试2
测试3
$（文档）.ready（函数（）{
$（'.your class'）.slick（{dots:true}）；
});

当包含来自cdn的js或css文件时，强烈建议在URL中跳过http/https。因此，不是：

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>

应该是：

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

在这种情况下，无论您的站点是否使用https，您都不会遇到任何问题。

如果您使用的是cdnThanks中的slick.min.js，那么您就不需要NPM包，这是可行的。我不确定为什么我的本机无法正常工作，可能是因为http末尾缺少s。

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