未捕获的TypeError:$(…).owlCarousel不是函数 [英] Uncaught TypeError: $(…).owlCarousel is not a function

问题描述

我在尝试设置猫头鹰轮播时遇到以下错误:

I'm getting the below error trying to setup owl carousel:

Uncaught TypeError: $(…).owlCarousel is not a function

这是我的脑袋:

   <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
 {{ 'theme.js' | asset_url | script_tag }}

在我的theme.js中:

And in my theme.js:

$(function() {

      $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 20,
        responsiveClass: true,
        navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
        responsive: {
          0: {
            items: 1,
            nav: true
          },
          900: {
            items: 3,
            nav: true
          }
        },
      });
  });

上述设置有什么问题?

推荐答案

当文档和$('.owl-carousel')准备就绪时，您应该初始化owlCarousel. 演示: https://gyx8899.github.io/YX-JS-ToolKit/pages/owlCarousel2/owl-navOnSide.html

You should init owlCarousel when the document and $('.owl-carousel') is ready. Demo: https://gyx8899.github.io/YX-JS-ToolKit/pages/owlCarousel2/owl-navOnSide.html

这篇关于未捕获的TypeError:$(…).owlCarousel不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！