Django模板For循环动态产品卡片实现6项/屏带前后按钮轮播方法

以下是基于你现有代码修改的完整实现方案，无需引入第三方轮播库，原生代码即可跑通：

1. 修改HTML模板结构 #

外层新增轮播容器、可视视口、滑动轨道和前后按钮，保留原有Django循环逻辑不变，调整列占比适配6项/屏的需求，同时修正了你原有代码里的标签嵌套错误：

<!-- 轮播外层容器 -->
<div class="product-carousel" style="position: relative; padding: 0 40px;">
  <!-- 前切按钮 -->
  <button class="carousel-btn carousel-prev" style="left: 0;">‹</button>
  
  <!-- 轮播可视视口 -->
  <div class="carousel-viewport" style="overflow: hidden; width: 100%;">
    <!-- 滑动轨道 -->
    <div class="carousel-track" style="display: flex; transition: transform 0.3s ease;">
      {% for product in categoryname %}
      <!-- 产品卡片项，每屏6个所以单张宽度1/6 -->
      <div class="col" style="width: 16.666%; flex-shrink: 0; padding: 10px;">
        <div class="card shadow-sm" style="width: 100%;height: 450px;">
          <img class="card-img-top" style="cursor:pointer;height:60%; width:100%;"
              data-product="{{ product.Productid }}"
              onclick=location.href="{% url 'detail' product.Productid %}" src="{{product.Icon}}"
              alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title" style="color: black; font-size: 20px;">{{product.Name}}</h5>
            <p class="card-text" id="price">{{product.Price}}</p>
            <span class="card-text" id="half" style="color: lawngreen;">{% widthratio product.Price 2 1 %}
            </span> <span style="color: orange;">First order price</span>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- 后切按钮 -->
  <button class="carousel-btn carousel-next" style="right: 0;">›</button>
</div>

2. 补充公共CSS样式 #

你可以把这段样式放到页面的<style>标签里，或者公共CSS文件中：

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
}
.carousel-btn:hover {
  background: rgba(0,0,0,0.9);
}
/* 响应式适配：小于768px时每屏2个 */
@media (max-width: 768px) {
  .carousel-track .col {
    width: 50%;
  }
}

3. 添加JavaScript交互逻辑 #

放到页面的<script>标签底部即可：

document.addEventListener('DOMContentLoaded', function() {
  const track = document.querySelector('.carousel-track');
  const prevBtn = document.querySelector('.carousel-prev');
  const nextBtn = document.querySelector('.carousel-next');
  const items = document.querySelectorAll('.carousel-track .col');
  let itemWidth = items[0].offsetWidth;
  // 按屏幕宽度自动适配每屏展示数量
  let itemsPerView = window.innerWidth > 768 ? 6 : 2;
  let maxOffset = (items.length - itemsPerView) * itemWidth;
  let currentOffset = 0;

  // 下一页逻辑
  nextBtn.addEventListener('click', function() {
    currentOffset -= itemWidth * itemsPerView;
    if (currentOffset < -maxOffset) currentOffset = -maxOffset;
    track.style.transform = `translateX(${currentOffset}px)`;
  });

  // 上一页逻辑
  prevBtn.addEventListener('click', function() {
    currentOffset += itemWidth * itemsPerView;
    if (currentOffset > 0) currentOffset = 0;
    track.style.transform = `translateX(${currentOffset}px)`;
  });

  // 窗口大小变化时重新计算参数，避免布局错乱
  window.addEventListener('resize', function() {
    itemWidth = items[0].offsetWidth;
    itemsPerView = window.innerWidth > 768 ? 6 : 2;
    maxOffset = (items.length - itemsPerView) * itemWidth;
    // 修正当前偏移量避免超出边界
    currentOffset = currentOffset < -maxOffset ? -maxOffset : currentOffset;
    currentOffset = currentOffset > 0 ? 0 : currentOffset;
    track.style.transform = `translateX(${currentOffset}px)`;
  });
});

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