Django教育网站Owl Carousel课程轮播显示异常求助

你的问题出在Owl Carousel未正确初始化配置，导致插件没有按照预期控制每个课程卡片的宽度和显示数量。以下是具体修复步骤：

1. 确认Owl Carousel依赖文件已正确引入 #

确保页面中已经加载了Owl Carousel的CSS和JS文件（如果还没引入，需要添加）：

<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="path/to/owl.carousel.min.css">
<link rel="stylesheet" href="path/to/owl.theme.default.min.css">

<!-- jQuery（Owl Carousel依赖jQuery） -->
<script src="path/to/jquery.min.js"></script>

<!-- Owl Carousel JS -->
<script src="path/to/owl.carousel.min.js"></script>

2. 添加Owl Carousel初始化配置 #

在页面底部（或单独的JS文件中）添加初始化代码，明确设置显示的卡片数量及响应式规则：

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
    items: 2,          // 默认显示2个课程卡片
    margin: 20,        // 卡片之间的间距（可根据需求调整）
    nav: true,         // 是否显示前后导航按钮（可选）
    dots: true,        // 是否显示底部指示器（可选）
    loop: false,       // 不需要循环滚动设为false
    responsive: {
      0: {
        items: 1       // 手机屏幕显示1个卡片
      },
      768: {
        items: 2       // 平板及以上屏幕显示2个卡片，新增课程后会自动启用滚动
      },
      992: {
        items: 3       // 大屏幕可设置显示3个卡片（按需调整）
      }
    }
  });
});

3. 检查卡片样式冲突 #

如果配置后仍有问题，检查.item类是否被其他CSS（比如Bootstrap的网格类）覆盖了宽度，可添加自定义样式确保卡片宽度正常：

.owl-carousel .item {
  width: auto;
  max-width: 100%;
}

完成以上步骤后，两门课程卡片会各占独立一列，新增课程时，当数量超过当前屏幕设置的items值，Owl Carousel会自动启用横向滚动，或者根据响应式规则调整显示数量。

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