我已经创建了光滑的 slider 。
这是我的代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8" />
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
</head>
<body>
<div class="slick-slider">
<img id="graphic1" class="carousel-image" alt="Image Caption" src="//cdn.shopify.com/s/files/1/0057/7782/products/img1_4e3a619a-0daa-439c-968b-6970fe8a7b1f_1024x1024.jpg?v=1434978806" width="564px"></a>
<img id="graphic2" class="carousel-image" alt="Image Caption" src="//cdn.shopify.com/s/files/1/0057/7782/products/img1_1024x1024.jpg?v=1434488016" width="564px"></a>
<img id="graphic3" class="carousel-image" alt="Image Caption" src="//cdn.shopify.com/s/files/1/0057/7782/products/img2_780e862e-5c3e-4245-82a4-e13f4bc8b19b_1024x1024.jpg?v=1434450473" width="564px"></a>
<img id="graphic4" class="carousel-image" alt="Image Caption" src="//cdn.shopify.com/s/files/1/0057/7782/products/img3_ac753481-98f3-4f28-bfc5-ec9443a9ff4c_1024x1024.jpg?v=1434488053" width="564px"></a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slick-slider').slick({
setting-name: setting-value
});
});
</script>
<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.min.js"></script>
</body>
</html>
当我检查此文件时，它显示如下内容:
SyntaxError: missing : after property id
我可以知道，如何解决这个问题？
任何帮助将不胜感激。
谢谢。
最佳答案
首先没有setting-name如果我没记错的话，slick.js 中的选项。
其次，作为选项提供给 js 的 JSON 对象是无效的，因为 setting-name有一个 -这是一个减法表达式。您必须改用这样的引号
$('.slick-slider').slick({
"setting-name": "setting-value"
});
根据评论，错误
$ is not defined是因为脚本文件没有按正确的顺序放置。您的 HTML 文件应如下所示<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8" />
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
</head>
<body>
<div class="slick-slider">
<img id="graphic1" class="carousel-image" alt="Image Caption" src="//cdn.shopify.com/s/files/1/0057/7782/products/img1_4e3a619a-0daa-439c-968b-6970fe8a7b1f_1024x1024.jpg?v=1434978806" width="564px"></a>
<img id="graphic2" class="carousel-image" alt="Image Caption" src="//cdn.shopify.com/s/files/1/0057/7782/products/img1_1024x1024.jpg?v=1434488016" width="564px"></a>
<img id="graphic3" class="carousel-image" alt="Image Caption" src="//cdn.shopify.com/s/files/1/0057/7782/products/img2_780e862e-5c3e-4245-82a4-e13f4bc8b19b_1024x1024.jpg?v=1434450473" width="564px"></a>
<img id="graphic4" class="carousel-image" alt="Image Caption" src="//cdn.shopify.com/s/files/1/0057/7782/products/img3_ac753481-98f3-4f28-bfc5-ec9443a9ff4c_1024x1024.jpg?v=1434488053" width="564px"></a>
</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.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slick-slider').slick({
setting-name: setting-value
});
});
</script>
</body>
</html>
这是一个演示 http://jsbin.com/kiyeno/edit?html,output
关于javascript - 语法错误 : missing : after property id when html file inspection，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31746603/