我正在尝试在网站上设置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>
我发现问题可能是我没有安装光滑的轮播软件包。所以我使用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传送带初始化并正常工作?
最佳答案
它似乎为我工作。
我只是添加了点,所以更容易看到。
我还通过https加载了CSS和脚本,以便可以在这里使用。
点击“运行代码段”以查看
<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>
关于javascript - 光滑轮播NPM,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49247781/