Uncaught TypeError: undefined is not a function - Owl carousel答案

【问题标题】：Uncaught TypeError: undefined is not a function - Owl carouselUncaught TypeError: undefined is not a function - Owl carousel
【发布时间】：2015-01-29 06:23:27
【问题描述】：

我正在使用：

wordpress 网站
猫头鹰轮播插件

这是我正在使用的 JQuery 代码：

$(document).ready(function() {

    $("#owl-images").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 

  });

  $(document).ready(function() {

    $("#owl-videos").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 

  });

我在this 问题中读到了 wordpress 与 jquery 的冲突，但我什至改为：

jQuery(document).ready(function() {

    jQuery("#owl-images").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 

  });

  jQuery(document).ready(function() {

    jQuery("#owl-videos").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 

  });

但是还是不行，还是会得到

Uncaught TypeError: undefined is not a function

【问题讨论】：

我们需要您的 html 代码的 head 部分？
请确保您包含了 jquery 库文件和在您的插件 owlCarousel 加载后加载的 jquery 库
通过在控制台jQuery.fn.owlCarousel中运行来检查owlCarousel是否被加载
@JqueryKing 我不应该在加载owlCarousel 之前加载Jquery 库吗？我一直这样做，从来没有遇到过问题。
@CerlinBoss jQuery.fn.owlCarousel 未定义

标签： jquery owl-carousel

【解决方案1】：

这意味着您的插件不包括在内

以相同的优先级顺序包含以下内容

jQuery
猫头鹰旋转木马

还要确保脚本链接没有给出404

【讨论】：

【解决方案2】：

我的回答有点晚了，但我希望它可以帮助其他人。

请参阅下面的 js 更改

jQuery(document).ready(function($) {
    $("#owl-images").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 
  });

jQuery(document).ready(function($) {
    $("#owl-videos").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 
  });

如果单独进行上述更改在您的 WordPress 主题中不起作用，请在头部而不是页脚中调用 owl.carousel.js 或 owl.carousel.min.js

【讨论】：

欢迎来到 SO，感谢您的贡献。像这样的答案需要更多的解释。您应该解释您给我们的代码如何以及为什么解决了 OP 的问题，以及 OP 真正遇到的问题是您没有解决的问题。谢谢。

【解决方案3】：

jQuery(document).ready(function($) {
    $("#owl-images").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 
  });

jQuery(document).ready(function($) {
    $("#owl-videos").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 
  });

【讨论】：