Owl-carousel在Django中无法显示且控制台报错，求修复方案

排查及修复步骤： #

• 严格遵循依赖加载顺序
  Owl-carousel依赖jQuery，必须先加载jQuery，再引入Owl的JS文件，不管是CDN还是本地引入都不能颠倒顺序：

  <!-- 先引入jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 再引入Owl的JS文件 -->
  <script src="{% static 'owlcarousel/owl.carousel.min.js' %}"></script>
  

• 本地引入时验证静态文件配置
  确保Django的settings.py中静态文件配置正确：

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [
      BASE_DIR / "static",
  ]
  

  引入静态资源必须用{% static %}模板标签，不能直接写相对路径：

  <link rel="stylesheet" href="{% static 'owlcarousel/owl.carousel.min.css' %}">
  <link rel="stylesheet" href="{% static 'owlcarousel/owl.theme.default.min.css' %}">
  

• 确保初始化代码在DOM加载完成后执行
  将Owl的初始化代码放在$(document).ready()中，或者放在页面底部</body>标签前，避免DOM未加载完成就执行初始化：

  $(document).ready(function(){
      $(".owl-carousel").owlCarousel({
          items: 3,
          loop: true,
          margin: 10
      });
  });
  

• 检查HTML结构是否符合要求
  必须使用标准的Owl-carousel结构：外层是带owl-carousel类的容器，内部元素需添加item类：

  <div class="owl-carousel">
      <div class="item"><img src="{% static 'images/slide1.jpg' %}" alt=""></div>
      <div class="item"><img src="{% static 'images/slide2.jpg' %}" alt=""></div>
      <div class="item"><img src="{% static 'images/slide3.jpg' %}" alt=""></div>
  </div>
  

• 根据控制台报错针对性修复

  • 若报错$ is not defined：说明jQuery未成功加载，检查引入路径或CDN链接是否有效；
  • 若报错owlCarousel is not a function：说明Owl的JS文件加载顺序错误或未加载成功，核对引入顺序和路径。

内容的提问来源于stack exchange，提问作者Anish