猫头鹰轮播中的功能问题答案

【问题标题】：function issue in owl carousal猫头鹰轮播中的功能问题
【发布时间】：2019-04-30 14:12:28
【问题描述】：

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 不是检查元素中的函数。我们如何解决这个问题？ :(

我在上面添加了我的 html 和脚本以进行更多说明。请通过这个。谢谢。

【问题讨论】：

你为owlCarousel添加了库吗？
是的 Hien Nguyen..
你应该将你的 html 添加到问题中
我加了兄弟...

标签： javascript html owl-carousel

【解决方案1】：

我尝试重现您的代码，它成功了。可能你把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>

【讨论】：

【解决方案2】：

成功了！！！祝福你！我用过这个：

jQuery(document).ready(function () {
    (function (jQuery) {
 >> my own codes ...
    })(jQuery);
});

【讨论】：