猫头鹰旋转木马的功能问题

时间:2019-04-30 14:12:29

标签: javascript html owl-carousel

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和脚本,以进行更多说明。请通过这个。谢谢。

2 个答案:

答案 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);
});