这个问题我之前也碰到过！核心问题出在你遍历的是所有商品的图片列表，然后用条件筛选当前商品的图片，导致forloop计数器是全局的，不是当前商品图片子集的计数器——这就是你看到第二个商品计数器从4开始的原因，最终导致轮播的指示器和active状态错位，无法正常加载。

第一步：修正视图层，传递当前商品的专属图片列表 #

你当前的get_context_data传递的是所有商品的图片，这完全没必要，而且会导致模板里的计数器混乱。改成只传递当前商品的图片：

class ProductDetailView(generic.DetailView):
    model = Product
    queryset = Product.objects.all()
    template_name = 'product_detail.html'
    
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # 只获取当前商品的图片，self.object就是当前DetailView对应的Product实例
        context['product_photos'] = PhotoProduct.objects.filter(product=self.object)
        return context

第二步：简化模板代码，直接遍历专属图片列表 #

现在模板里不需要再用if判断商品ID了，直接遍历product_photos，这样forloop计数器会从0开始重新计数，轮播的指示器和active状态就能正确匹配：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    {% for photo in product_photos %}
      <li data-target="#carouselExampleIndicators" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.counter0 == 0 %} active {% endif %}"></li>
    {% endfor %}
  </ol>
  <div class="carousel-inner">
    {% for photo in product_photos %}
      <div class="carousel-item {% if forloop.counter0 == 0 %} active {% endif %}">
        <img src="{{ photo.photo.url }}" class="img-fluid d-block w-100" style="height: 300px;" alt="{{ product.nombre }}">
      </div>
    {% endfor %}
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

进阶优化：利用Django的反向关联（更简洁） #

你还可以给PhotoProduct的外键添加related_name，这样在模板里直接通过商品实例访问它的图片，连视图层的get_context_data都不用改：

修改models.py：

class PhotoProduct(models.Model):
    # 添加related_name，方便通过product.photos直接访问图片
    product = models.ForeignKey(Product, on_delete=models.CASCADE, related_name='photos')
    photo = models.ImageField(upload_to='images/')
    
    def __str__(self):
        return self.product.nombre

模板直接使用反向关联：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    {% for photo in product.photos.all %}
      <li data-target="#carouselExampleIndicators" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.counter0 == 0 %} active {% endif %}"></li>
    {% endfor %}
  </ol>
  <div class="carousel-inner">
    {% for photo in product.photos.all %}
      <div class="carousel-item {% if forloop.counter0 == 0 %} active {% endif %}">
        <img src="{{ photo.photo.url }}" class="img-fluid d-block w-100" style="height: 300px;" alt="{{ product.nombre }}">
      </div>
    {% endfor %}
  </div>
  <!-- 控制按钮部分不变 -->
</div>

这样修改后，每个商品的轮播都会基于自己的图片列表生成，计数器完全独立，轮播就能正常工作了。

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