Question

我已经创建了光滑的滑块。

这是我的代码：

<!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：属性id
之后

我可以知道，如何解决这个问题？

任何帮助都将受到高度赞赏。

感谢。

Answer 1

首先，如果我没有错，slick.js中没有setting-name选项。

其次，作为滑动到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

Answer 2

不要在变量和值中使用-。您可以使用驼峰案例或引号：

$('.slick-slider').slick({
   settingName: settingValue,
   "setting-name": settingValue
});

SyntaxError：missing：在html文件检查

2 个答案: