Giving an error while implementing owl-carousel? Uncaught TypeError: $(...).owlCarousel is not a function

Question

我试图在我的 django 电子商务网站上为我的产品实现基本的轮播。但是，我有一个错误，而 implementing.I 不知道是什么问题。它给出了这个错误：'Uncaught TypeError: $(...).owlCarousel is not a function'。也许这个错误是它不起作用的原因。我导入的文件：

<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/owl.theme.default.min.css' %}">

html

<div class="row owl-carousel" style="width:80%;position: relative; left:10%;">

  {% for product in products %}
                      <div class="store col-lg-3 col-6 item">
                        <div class="single-product">
                          <div class="single-product">
  <div class="header-single-product">
  <p style="margin-top:-10px;margin-bottom:-10px" class="code">Код: 51265</p>
  {% if product in wishedProductsList %}
  <i class="bi bi-heart-fill addWishlist" style="color: red" data-product="{{product.id}}" data-action="add"></i>
  {% else %}
  <i class="bi bi-heart addWishlist"  data-product="{{product.id}}" data-action="add"></i>
  {% endif %}
    <i class="fa fa-balance-scale" style="margin-right:5px;"></i>

  </div>
  <div class="product-image">
    <a href="{% url 'product_details' product.category.slug product.slug %}"><img style="width: 100%;height: 100%;" src="{{product.imageURL}}"></a>
  </div>
  <p style="color:#617375;">В наличии</p>
  <p style="color:black;">{{product.name}}</p>
  <p>.....</p>
  <p>.....</p>
  <p>.....</p>
  <p class="price">Цена: {{product.price}}</p>

  <div class="counter">
    <div class="arrow-up increase" id="arrow-up" data-product="{{product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
    <div class="quantity"><input type="number" class="quantity" value="1" data-product="{{product.id}}"></div>
    <div class="arrow-down increase" id="arrow-down" data-product="{{product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
</div>
  <div class="product-foot"><div class="product-action-2">
                                <button data-product="{{product.id}}" style="width:100%;height: 50px;" data-action="add" class="btn btn-outline-secondary add-btn update-cart">В Корзину</button>
                              </div></div>
 
</div>
                        </div>
                      </div>
                        {% endfor %}
                        <div class="angle angle-right next" style="float:right;"><img src="{% static 'images/angle-right.png' %}"></div>
                      </div>

javascript

<script>
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
</script>

Answer 1

有一次我似乎遇到了问题。答案是 jQuery 与 $ 调用冲突。所以尝试以这种方式初始化 owl：

<script>
jQuery(document).ready(function($) {
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});
});
</script>

请确保您的 js/jquery.min.js 和 js/owl.carousel.min.js 路径正确，不要使用任何 defer 或 async 属性并包含在标题部分。

Giving an error while implementing owl-carousel? Uncaught TypeError: $(...).owlCarousel is not a function

Giving an error while implementing owl-carousel? Uncaught TypeError: $(...).owlCarousel is not a function

javascript

jquery

css

django-templates

owl-carousel