类型错误：$(...).owlCarousel不是一个函数。

Question

我在将这个轮播组件添加到我的prestashop模板时遇到了问题。

它返回了以下错误：

TypeError: $(...).owlCarousel 不是一个函数 navigation : true

用于初始化的代码如下:

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

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

有什么线索吗？

谢谢。

- Xavi Alsina

Answer 1

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

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

只有这样，它才会起作用。

- Manoj Verma

Answer 2

如果jQuery文件在猫头鹰轮播文件之后加载，您将会收到此错误。（请确保您对jQuery的引用在猫头鹰轮播参考js文件之上。）

- Tom

---

感谢您开始回答。请尝试提供一些见解，指出他们可能在哪里寻找问题以及如何解决此问题。 - Ash Ryan Arnwine

Answer 3

有时候，HTML在外部脚本完全加载之前执行内联脚本的原因是什么。我通过以下方法得到了解决方案。我只需将owl.carousel源调用添加defer属性，如下所示。 <script defer src="plugins/OwlCarousel2.3/owl.carousel.min.js"></script> 有关defer属性的文档-->att_script_defer-link

- MD Ashik

---

这解决了我的问题。我尝试了所有排序jquery和js文件的方法，使用owl carousel的cdn链接。 - Sreejith vs

Answer 4

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

使用jQuery.isFunction进行检查。

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

使用JavaScript typeof运算符进行检查

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

- Nolwennig

Answer 5

首先，添加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>

- Mahbub Ul Islam

Answer 6

以下内容可能会有所帮助。请按照以下步骤操作：

1. 导入或链接owlCarousel.js文件。
2. 在jQuery.js文件后链接owlCarousel.js文件。
3. 进行硬刷新：ctrl + shift + R。

仍然遇到问题？

可能是由于以下原因：

你的 $(".owl-carousel").owlCarousel() 函数在JS文件（owlCarousel.js，jQuery.js）加载之前执行了。

大多数情况下，您可以通过使用这些技巧并增加超时来解决此问题。

$(document).ready(function() {
    setTimeout(function(){
        $(".owl-carousel").owlCarousel()
    },
    2000);
});

- MD TAREK HOSSEN

---

我正在运行Rails...所以很难正确加载脚本的顺序。这是唯一对我起作用的答案。 - mystic cola

Answer 7

在您的主页中添加 jquery.min.js 和 owl.carousel.min.js 文件，并添加以下代码：

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

- Simo OM

Answer 8

尝试使用{literal}{/literal}标签。通常建议在.tpl文件（smarty）中将javascript放在这些标签中。Javascript可能在没有标签的情况下工作，但有时会返回错误（如您的情况）。

敬礼

- user2831723

---

我也尝试过这个，但是它一直不起作用。它只是一直返回相同的错误。 - Xavi Alsina

你是如何将JS文件引入到代码中的？你是否在.php文件（显示.tpl文件的核心/模块文件）中使用了PrestaShop预设的路径？以下是示例：$this->context->controller->addJS(($this->_path).'views/js/YOUR.js'); - user2831723

我只是在header.tpl文件中的<script>标签之间添加脚本。 - Xavi Alsina

你打算在每个页面上都使用那个脚本吗？即使是这样，你仍然应该像这样添加它（例如，如果你在一个模块内使用它）。在你的情况下，PrestaShop 会在每次加载页面时加载脚本，即使它没有被使用。 - user2831723

嘿，user2831723，我稍后会尝试一下。否则，我会在prestashop论坛上问同样的问题，并在管理员的帮助下检查代码和路径是否正确。 - Xavi Alsina

Answer 9

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

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

    if (owl.length) { 
        owl.owlCarousel({

        });
    } 
});

- user1370710

Answer 10

在我的情况下，我正在使用Webpack来捆绑我的资源，我需要遵循GitHub上猫头鹰页面的这个部分。

该部分指出，您应该像这样添加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';

- Weam Adel