Question

我很难将这个轮播添加到我的prestashop模板中。

它返回以下错误：

TypeError：$（...）。owlCarousel不是函数导航：true

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

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

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

有任何线索吗？

感谢。

Answer 1

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

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

然后才会起作用。

Answer 2

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

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

Answer 3

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

查看jQuery.isFunction

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

查看JavaScript typeof operator

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

Answer 4

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

BR的

Answer 5

html有时在外部脚本完美加载之前执行内联脚本的原因。我通过这种方式得到解决方案。我刚刚在 import zipfile with zipfile.ZipFile('/path/to/zip_file.zip', 'r') as f: zipInfo = f.infolist() for member in zipInfo: member.filename = member.filename.encode('cp437').decode('gbk') f.extract(member) 呼叫中添加了 defer 属性，就像..

owl.carouselsource

有关延期属性的文档-> att_script_defer-link

Answer 6

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

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

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

        });
    } 
});

Answer 7

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

Answer 8

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

Answer 9

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

-结果低于-

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

解决了问题。

Answer 10

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

TypeError：$（...）。owlCarousel不是函数

10 个答案: