jQuery(document).ready(function () {
(function (jQuery) {
jQuery(".mon-owl-carousel").owlCarousel({
loop: !0,
nav: !1,
items: !0,
navText: !1,
autoplay: !0,
smartSpeed: 4e3,
dots: !0,
autoWidth: !1,
responsive: {
0: {
items: 1,
loop: !0,
margin: 0
},
480: {
items: 2,
loop: !0,
margin: 0
},
768: {
items: 3,
loop: !0,
margin: 60
},
1e3: {
items: 4,
loop: !0
}
}
});
})(jQuery);
});
<div class="mon-owl-carousel owl-carousel">
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Profile" title="Monest Agent Profile" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-1.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Property Listings" title="Monest Agent Property Listings" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-2.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Drive" title="Monest Agent Drive" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-3.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-3.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-4.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-5.png">
</div>
大家好,我正在为项目使用此脚本。但是在这里说TypeError:jQuery(...)。owlCarousel不是inspect元素中的函数。我们该如何解决呢? :(
我在上面添加了我的html和脚本,以进行更多说明。请通过这个。谢谢。
答案 0 :(得分:0)
我尝试重现您的代码,它奏效了。可能是您将owlCarousel
放在了jQuery
之前。
jQuery(document).ready(function () {
(function (jQuery) {
jQuery(".mon-owl-carousel").owlCarousel({
loop: !0,
nav: !1,
items: !0,
navText: !1,
autoplay: !0,
smartSpeed: 4e3,
dots: !0,
autoWidth: !1,
responsive: {
0: {
items: 1,
loop: !0,
margin: 0
},
480: {
items: 2,
loop: !0,
margin: 0
},
768: {
items: 3,
loop: !0,
margin: 60
},
1e3: {
items: 4,
loop: !0
}
}
});
})(jQuery);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<div class="mon-owl-carousel owl-carousel">
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Profile" title="Monest Agent Profile" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Property Listings" title="Monest Agent Property Listings" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Drive" title="Monest Agent Drive" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
答案 1 :(得分:-2)
成功了!!!祝福你!我用过这个:
jQuery(document).ready(function () {
(function (jQuery) {
>> my own codes ...
})(jQuery);
});