我无法将此轮播添加到我的 prestashop 模板中。
它返回给我以下错误：
TypeError: $(...).owlCarousel 不是函数 导航：正确
用于初始化它的代码就是这个
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true
});
});
我正在尝试解决它，但似乎不可能，因为在空的 html 页面上它可以工作，但当我在 Prestashop 上使用它时却不行。
有什么线索吗？
谢谢。
在主页中添加
owl.carousel.min.js$("#owl-demo").owlCarousel({
navigation : true
});
只有这样才有效。
如果 jquery 文件在 owl carousel 文件之后加载，您将收到此错误。
（确保对 jquery 的引用位于 owl carousel 引用 js 文件上方）
有时 html 在外部脚本完美加载之前执行内联脚本的原因。 我通过这种方式得到解决方案。 我刚刚将 defer 属性添加到我的
owl.carousel source<script defer src="plugins/OwlCarousel2.3/owl.carousel.min.js"></script>有关 defer 属性的文档 --> att_script_defer-link
如果 JavaScript 文件加载受到一些延迟的影响，您可以在调用函数之前检查函数是否已定义。
if($.isFunction('owlCarousel')){
$("#owl-demo").owlCarousel({
navigation : true
});
}
if(typeof owlCarousel === 'function') {
$("#owl-demo").owlCarousel({
navigation : true
});
}
尝试使用 {literal} {/literal} 标签。通常建议将 javascript 放入 .tpl 文件中的这些标签内（聪明）。 Javascript 可能在没有标签的情况下工作，但有时会返回错误（就像你的情况一样）
BR 的
我通过检查选择器是否存在来修复。由于这是我网站上的问题，我在单个页面的页脚中添加了代码，但它抛出错误或该选择器不存在的其他页面。
$(document).ready(function() {
var owl = $('.servicesCarosal');
//console.log(owl);
if (owl.length) {
owl.owlCarousel({
});
}
});
首先，添加
Owl Carousel CssOwl 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" />
然后添加
JqueryOwl Carousel Js确保将
JqueryOwl 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>
这些可能会有帮助。 按照步骤进行
仍然面临问题？
可能是这个原因：
您的
$(".owl-carousel").owlCarousel()大多数情况下，您可以通过使用此技巧和增加超时来解决此问题。
$(document).ready(function() {
setTimeout(function(){
$(".owl-carousel").owlCarousel()
},
2000);
});
在主页中添加 jquery.min.js 和 owl.carousel.min.js 文件并添加以下代码：
$(document).ready(function() {
var owl = $("#owl-demo");
if(owl.length){
owl.owlCarousel({
navigation : true
});
}
});
我也有同样的问题。只需在函数上方添加 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>
在我的例子中，我使用 Webpack 来捆绑我的资产，我需要按照 GitHub 上 owl 页面上的本节进行操作。
该部分指出您应该像这样添加 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';
聚会迟到了，但是在头部加载 JQuery 脚本解决了我的问题。
将您的 Jquery 文件和 owl.js 文件添加到标题部分
对我来说，将
item-结果如下-
<div class="item carousel-item" style="margin: auto;">解决了问题。