TypeError: $(...).owlCarousel 不是函数

Posted 2023-02-16

【中文标题】TypeError: $(...).owlCarousel 不是函数

【英文标题】：TypeError: $(...).owlCarousel is not a function

【发布时间】：2014-03-06 20:16:37

【问题描述】：

我无法将此轮播添加到我的 prestashop 模板中。

它返回以下错误：

导航：是的

用于初始化它的代码就是这个

$(document).ready(function() 
  $("#owl-demo").owlCarousel(
    navigation : true
  );
);

我正在尝试解决它，但似乎不可能，因为在一个空的 html 页面上它可以工作，但当我在 Prestashop 上使用它时却不行。

有什么线索吗？

谢谢。

【参考方案1】：

在您的主页中添加owl.carousel.min.js文件，在您正在使用的文件之前添加以下代码：

$("#owl-demo").owlCarousel(
    navigation : true
  );

只有这样才行。

【参考方案2】：

如果在 owl carousel 文件之后加载 jquery 文件，则会出现此错误。

（确保您对 jquery 的引用位于 owl carousel 引用 js 文件上方）

【讨论】：

感谢您开始回答。尝试提供有关他们可能在哪里寻找问题以及如何解决问题的见解。

【参考方案3】：

如果 javascript 文件加载受到一些延迟的影响，您可以在调用之前检查函数是否已定义。

联系jQuery.isFunction

if($.isFunction('owlCarousel'))
  $("#owl-demo").owlCarousel(
    navigation : true
  );

联系JavaScript typeof operator

if(typeof owlCarousel === 'function')  
  $("#owl-demo").owlCarousel(
    navigation : true
  );

【参考方案4】：

有时 html 在外部脚本完美加载之前执行内联脚本的原因。 我通过这种方式得到解决方案。 我刚刚将 defer 属性添加到我的 owl.carouselsource 调用中，例如 ..

<script defer src="plugins/OwlCarousel2.3/owl.carousel.min.js"></script>

关于 defer 属性的文档 --> att_script_defer-link

【参考方案5】：

尝试使用 literal /literal 标签。通常建议将 javascript 放在 .tpl 文件 (smarty) 中的这些标签内。 Javascript 可能在没有标签的情况下工作，但有时会返回错误（就像你的情况一样）

BR的

【讨论】：

我也试过这个，但一直没有工作。它只是让我返回同样的错误。

如何将 js 拉入文件中？您是否在 .php （无论核心/模块文件显示您的 .tpl 文件）文件中使用 pretsatshop 确定的路径？示例在这里： $this->context->controller->addJS(($this->_path).'views/js/YOUR.js');

我只是在 header.tpl 上的

你打算在每一页上都使用那个脚本吗？即使那样，您仍然应该像这样添加它（例如，如果您在模块中使用它）在您的情况下，prestashop 将每次加载脚本，即使它没有被使用。

我只想在主页中使用它（否则，感谢您警告我它会显示在每个页面上）。所以我必须在 prestashop .php 路径上添加脚本并添加脚本？那么函数的开始呢？在php文件上也？或者我必须使用该函数制作另一个 JS 文件？

【参考方案6】：

我通过检查选择器是否存在来解决问题。由于这是我网站上的问题，我在页脚中为单个页面添加了代码，但它抛出了错误或其他不存在该选择器的页面。

$(document).ready(function() 
    var owl = $('.servicesCarosal');
            
    //console.log(owl);

    if (owl.length)  
        owl.owlCarousel(

        );
     
);

【参考方案7】：

我遇到了同样的问题。只需在函数上方添加 js 文件即可

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!--DO NOT ENTER ANY EXTERNAL LINK IN BETWEEN-->
<script type="text/javascript">
$(document).ready(function() 
    $('.owl-carousel').owlCarousel(
        loop: true,
    );
);
</script>

【讨论】：

为什么会有帮助？

【参考方案8】：

对我来说，将 itemclass 添加到 carousel-item

-结果如下-

<div class="item carousel-item" style="margin: auto;">

问题已解决。

【参考方案9】：

首先，添加Owl Carousel Css 和Owl Carousel Theme Default Css 文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

然后添加Jquery和Owl Carousel Js文件。

确保将Jquery 放在Owl Carousel Js 之前。

像这样：

<!-- put jquery before owl carousel -->
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- owl carousel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

【参考方案10】：

在我使用 Webpack 捆绑资产的情况下，我需要在 GitHub 上的 owl 页面上关注 this section。

该部分指出您应该像这样添加 JQuery：

webpack.config.js

const webpack = require('webpack');

//...
plugins: [
    new webpack.ProvidePlugin(
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    ),
],
//...

index.js

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

【参考方案11】：

在首页添加jquery.min.js和owl.carousel.min.js文件，并添加如下代码：

$(document).ready(function() 
  var owl = $("#owl-demo");
  if(owl.length)
    $("#owl-demo").owlCarousel(
      navigation : true
    );
  
);

【参考方案12】：

将您的 Jquery 文件和 owl.js 文件添加到标题部分