Question

我已将owlCarousel添加到我的页面。但我得到这个错误。并坚持了几个小时.. :(

HTML代码

custom.js中的

功能 $（＆＃34;＃猫头鹰英雄＆＃34）。owlCarousel（{

    navigation: true, // Show next and prev buttons
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: "fadeUp",
    autoPlay: true,
    navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]

});

参考添加

从Chrome屏幕截图

Answer 1

如果脚本出现故障，您将收到此错误。您必须以正确的顺序加载

jquery
你喜欢的旋转木马（猫头鹰旋转木马）
您的脚本调用owlCarousel()

（如果你从未首先导入过owlCarousel插件，你也会得到这个。）

解释：jquery会将$变量放在全局命名空间中。你的owlCarousel插件将修改全局命名空间。然后你可以把它称为jquery中的可链接函数。它必须按此顺序发生，如果有任何缺失或重新排列它将会中断。

修复：移动jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

到整个加载脚本系列的顶部。它目前在所有需要它的插件之后加载。

以下是Owl Carousel文档的更多细节：

 <link rel="stylesheet" href="owl-carousel/owl.carousel.css">  <link rel="stylesheet" href="owl-carousel/owl.theme.css">  <script src="jquery-1.9.1.min.js"></script>  <script src="assets/owl-carousel/owl.carousel.js"></script>

您必须按该订单导入资产。请参阅：http://owlgraphic.com/owlcarousel/

同样在你的代码中......确保你在$(document).ready上调用轮播，所以你的所有脚本和DOM都被初始化了。

$(document).ready(function() { $("#owl-hero").owlCarousel({ navigation: true, // Show next and prev buttons slideSpeed: 300, paginationSpeed: 400, singleItem: true, transitionStyle: "fadeUp", autoPlay: true, navigationText: [ "<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>" ] }); });

Answer 2

custom.js 中的@isanka试试这个：

(function($) {
    $(document).ready(function() {
            // your code;
    });
}) (jQuery);

正如@ the_5imian所说，在所有包含的脚本之前包括 jquery 1.11.3 。

Answer 3

将Jquery包含在所有js文件的顶部

如下订单

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="~/bootstrap-assets/js/bootstrap.min.js"></script>

等等......

Answer 4

这是我的custom.js文件。

$（document）.ready（function（）{ / ***************** Navbar-Collapse ****************** /

$(window).scroll(function () {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

/***************** Page Scroll ******************/

$(function () {
    $('a.page-scroll').bind('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

/***************** Scroll Spy ******************/

$('body').scrollspy({
    target: '.navbar-fixed-top',
    offset: 51
})

/***************** Owl Carousel ******************/

$("#owl-hero").owlCarousel({

    navigation: true, // Show next and prev buttons
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: "fadeUp",
    autoPlay: true,
    navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]

});


/***************** Full Width Slide ******************/

var slideHeight = $(window).height();

$('#owl-hero .item').css('height', slideHeight);

$(window).resize(function () {
    $('#owl-hero .item').css('height', slideHeight);
});
/***************** Owl Carousel Testimonials ******************/

$("#owl-testi").owlCarousel({

    navigation: false, // Show next and prev buttons
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: "backSlide",
    autoPlay: true

});
/***************** Countdown ******************/

$('#fun-facts').bind('inview', function (event, visible, visiblePartX, visiblePartY) {
    if (visible) {
        $(this).find('.timer').each(function () {
            var $this = $(this);
            $({
                Counter: 0
            }).animate({
                Counter: $this.text()
            }, {
                duration: 2000,
                easing: 'swing',
                step: function () {
                    $this.text(Math.ceil(this.Counter));
                }
            });
        });
        $(this).unbind('inview');
    }
});
/***************** Google Map ******************/

function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: new google.maps.LatLng(39.92757, -83.160207),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

/***************** Wow.js ******************/

new WOW().init();

/***************** Preloader ******************/

var preloader = $('.preloader');
$(window).load(function () {
    preloader.remove();
});

}）

未捕获的TypeError：$（...）。owlCarousel不是函数

4 个答案: