光滑的轮播 NPM答案

【问题标题】：Slick Carousel NPM光滑的轮播 NPM
【发布时间】：2018-03-13 03:20:29
【问题描述】：

我正在尝试在网站上设置 Slick Carousel。作为测试，我首先尝试使用直接来自光滑站点https://kenwheeler.github.io/slick/ 的代码在空白页面上创建一个。即使将 js 链接更新到 http:，似乎也无法识别 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>

我认为问题可能是我没有安装 slick carousel 包。所以我使用 NPM 安装，现在我的 package.json 看起来像这样

{
"name": "J",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"jquery": "^3.3.1",
"json-server": "^0.12.1",
"slick-carousel": "^1.8.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}

我是否遗漏了应该添加的其他内容，以便 Slick 轮播初始化和正常工作？

【问题讨论】：

如果你使用来自cdn的slick.min.js，你不需要NPM包

标签： javascript jquery html npm slick.js

【解决方案1】：

它似乎对我有用。
我只是添加了点，以便更容易看到。

我还通过 https 加载了 css 和脚本，这样它就可以在这里工作了。

点击“运行代码sn-p”查看

<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="https://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="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 type="text/javascript">
    $(document).ready(function(){
        $('.your-class').slick({dots:true});
    });
</script>

</body>

【讨论】：

谢谢，可以了。我不确定为什么我的最初不起作用，可能是因为 http 末尾缺少 s。

【解决方案2】：

强烈建议在包含来自 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，您都不会遇到问题。

【讨论】：