Uncaught TypeError: undefined is not a function slick car答案

【问题标题】：Uncaught TypeError: undefined is not a function slick carUncaught TypeError: undefined is not a function slick car
【发布时间】：2014-12-13 06:23:21
【问题描述】：

我已阅读并找不到适合我的问题的解决方案

我正在尝试让光滑的旋转木马工作。我已经让它在此处显示的 jsbin 上工作： http://jsbin.com/gojozobemi/1/edit?html,output

但是，当在我的桌面上工作时，它会在开发控制台中显示错误消息“未捕获的 TypeError：未定义不是函数” 这是我的一些桌面代码

$(document).ready(function(){
    $('.single-items').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true
    });
});

<div class="single-items">
    <div>
        <img src="http://wallpapercartoon.com/wp-content/uploads/2014/07/o-DOUG-facebook.jpg">
    </div>
    <div>
        <img src="http://img3.wikia.nocookie.net/__cb20130803215442/nickelodeon/images/e/e2/Tumblr_lvjvhxwDiM1r6hffko1_400.jpg">
    </div>

    <div>
        <img src="http://fc02.deviantart.net/fs70/f/2013/303/b/4/pork_chop_by_barontremaynecaple-d6sdm6s.jpg">
    </div>
</div>

我很困惑为什么这可以在 JSBin 而不是我的桌面上工作，任何帮助都将不胜感激

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <!-- If you delete this meta tag World War Z will become a reality -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>Coffee Site</title>

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/vendor/modernizr.js"></script>
  <script src="js/slickini.js"></script>
</head>

<body>
  <div class="contain-to-grid sticky">
    <nav class="top-bar" data-topbar role="navigation">
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">Coffee Site</a></h1>
        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
        </li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="has-form">
            <div class="row collapse">
              <div class="large-8 small-9 columns">
                <input type="text" placeholder="Find Stuff">
              </div>
              <div class="large-4 small-3 columns">
                <a href="#" class="alert button expand">Search</a>
              </div>
            </div>
          </li>
        </ul>

        <!-- Left Nav Section -->
        <ul class="left">
          <li class="has-dropdown">
            <a href="#">Left Button Dropdown</a>
            <ul class="dropdown">
              <li><a href="#">First link in dropdown</a>
              </li>
              <li class="active"><a href="#">Active link in dropdown</a>
              </li>
            </ul>
          </li>

        </ul>
      </section>
    </nav>
  </div>
  <!---main content goes here-->
  <div class="single-items">
    <div>
      <img src="http://wallpapercartoon.com/wp-content/uploads/2014/07/o-DOUG-facebook.jpg">
    </div>

    <div>
      <img src="http://img3.wikia.nocookie.net/__cb20130803215442/nickelodeon/images/e/e2/Tumblr_lvjvhxwDiM1r6hffko1_400.jpg">
    </div>

    <div>
      <img src="http://fc02.deviantart.net/fs70/f/2013/303/b/4/pork_chop_by_barontremaynecaple-d6sdm6s.jpg">
    </div>
  </div>


  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>


  <script>
    $(document).foundation();
  </script>

</html>

【问题讨论】：

您能否在您的 jsbin 链接中发布一些代码？谢谢。
已修复，如果还有什么我可以添加的可以帮助的，请告诉我。这是我第一次在这里提问。
谢谢。我不明白为什么它不起作用。你在加载脚本之前加载了 jquery 吗？
我的整个 html 都在底部，如果有什么不合适的地方请告诉我，因为我完全被难住了
所有网址都不是 404 错误，对吧？相关地，你为什么要加载 jquery 两次（一次在顶部，一次在底部）？

标签： jquery carousel typeerror

【解决方案1】：

只需将 http 或 https 添加到您的 jquery.slick script 参考。

<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

您的桌面上可能有一个静态网站（没有 Web 服务器），因此浏览器不知道如何在没有 http 或 https 的情况下解析引用。由于 JSBin 与任何托管网站一样在 Web 服务器上运行，因此浏览器知道如何解析引用。它添加 http 或 https 以获取站点 URL 的值。

*对您的 link css 引用执行相同操作。

【讨论】：

好吧，我想我应该更新一下，我解决了我的问题，这意味着我放弃了光滑的旋转木马，选择了运行良好的猫头鹰旋转木马。谢谢大家的帮助！！！
@CodyCarmichael 如果可行，请随时接受答案。

【解决方案2】：

尝试删除已加载的 jquery 的双实例（'vendor/jquery.js' 和 'jquery-1.11.1.min.js'）。据我所知，slick.js 与旧版本有问题jquery 也是。

【讨论】：