类型错误: $(..).猫头鹰旋转木马不是一个功能

Question

我在将此轮播添加到我的prestashop模板时遇到麻烦。

它返回以下错误：

类型错误： $（...）。猫头鹰旋转木马不是一个功能导航 ： 真

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

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

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

有什么线索吗？

谢谢。

Answer 1

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

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

那么只有它会起作用。

Answer 2

如果 jquery 文件在 owl 轮播文件之后加载，您将收到此错误。

（确保你对jquery的引用在猫头鹰轮播引用js文件上方）

Answer 3

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

检查jQuery.isFunction

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

检查 JavaScript 类型运算符

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

Answer 4

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

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

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

Answer 5

尝试使用 {literal}

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

BR的

Answer 6

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

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

Answer 7

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

Answer 8

这些可能会有所帮助。按照步骤操作

1. 导入/链接猫头鹰轮播.js文件
2. 链接猫头鹰旋转木马.js文件后jQuery.js文件。
3. 硬重载：ctrl + shift + R

仍然面临问题？

可能是由于这个原因：

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

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

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

Answer 9

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

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

Answer 10

我遇到了同样的问题。只需在函数上方添加 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>

<</div> div class="one_answers">

就我而言，当我使用 Webpack 捆绑我的资产时，我需要在 GitHub 上的猫头鹰页面上遵循这一部分。

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

webpack.config.js

const webpack = require('webpack');
//...
plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
],
//...

索引.js

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

Answer 11

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

Answer 12

对我来说

，将item类添加到轮播项目

-

结果如下-

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

解决了问题。