如何解决'Slick'轮播JQuery代码无法运行/加载
尝试使用Slick轮播,并遵循其网站上的“用法”,但没有运气。
我的代码:
<html>
<head>
<title>slick test</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="your-class">
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
$('.single-item').slick();
});
</script>
</body>
</html>
我认为JQuery有点问题,因为VS代码显示初始化脚本中的错误。
我尝试使用CD的slick版本和较新的JQuery版本,但似乎都无法使用。除了div和“单个项目”脚本中的图像外,这与光滑网站上提供的代码相同。
解决方法
- 您在CDN内容的代码中缺少'http(s)://'前缀
- CDN的便捷教程(链接)。
- 您将示例代码的一部分放在了未定义的代码中
工作代码:
<html>
<head>
<title>slick test</title>
<link rel="stylesheet" type="text/css" href="https:///cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</head>
<body>
<div class="your-class">
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
<div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
//setting-name: setting-value
});
$('.single-item').slick();
});
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。