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

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

HTML代码

函数在custom.js $（“＃owl-hero”）。owlCarousel（{

navigation: true, // Show next and prev buttons slideSpeed: 300, paginationSpeed: 400, singleItem: true, transitionStyle: "fadeUp", autoPlay: true, navigationText: ["", ""] }); 

参考添加

从铬的屏幕截图

Answer 1

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

1. jQuery的

2. 你喜欢的旋转木马（猫头鹰旋转木马）

3. 你的脚本调用owlCarousel()

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

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

修复：移动jQuery

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

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

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

同样在你的代码中……确保你在$(document).ready上调用carousel，所以你的所有脚本和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: [ "", "" ] }); }); 

Answer 2

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

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

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

Answer 3

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

喜欢下面的订单

等等…

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: ["", ""] }); /***************** 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(); }); 

}）