在实现owl时出现错误？Uncaught：$(.).owlCarousel不是函数

Question

我试图在我的django电子商务网站上为我的产品实现基本的旋转木马。但是，我在实现时出错了，我不知道问题出在哪里。它给出了这个错误：“Uncaught：$(.).owlCarousel不是一个函数”。也许这个错误是它不起作用的原因。我已经导入的文件：

<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与$ calls的冲突。因此，尝试以这种方式初始化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属性，并包含在head部分中。