Question

我已经在首页上制作了轮播，该轮播会在卡片视图中按类别列出用户希望购买的产品。之前运行良好，每个类别显示3张卡片。但是，现在轮播无法正确加载。我的HTML代码如下：

<div class="container-fluid ml-5">
  {% for product, range, nSlides in allProds %}
  <h5>{{product.0.category}}</h5>
  <div class="row">
    <div id="myCarousel{{forloop.counter}}" class="col carousel slide mt-3 mr-3 ml-1" data-ride="carousel" data-interval="false">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel{{forloop.counter}}" data-slide-to="0" class="active"></li>
        {% for i in range %}
        <li data-target="#myCarousel{{forloop.parentloop.counter}}" data-slide-to="{{i}}"></li>
        {% endfor %}
      </ol>

      <!-- Slideshow starts here(1.1) -->
      <div class="container carousel-innner row w-100 mx-auto">

        <div class="carousel-item active mr-3">
          <!--Slides -->
          {% for i in product %}
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 mr-3">
            <div class="card align-items-center mt-3 mr-3" style="width: 18rem;">
              <img src="/media/{{i.image}}" class="card-img-top" alt="...">
              <div class="card-body text-center">
                <h6 class="card-title" id="namepr{{i.id}}">{{i.product_name}}</h6>
                <h6 class="card-title"><b>Price: ₹ <span id="pricepr{{i.id}}">{{i.price}}</span></b></h6>
                <h6 class="card-title"><b>Stock:<span id="stockpr{{i.id}}">{{i.stock}}</span></b></h6>
                <!-- <p class="card-text">{{i.description|slice:"0:70"}}...</p> -->
                <span id="divpr{{i.id}}" class="divpr">
                  <button id="pr{{i.id}}" class="btn btn-primary cart">Add to Cart</button>
                </span>
                <a href="/shop/products/{{i.id}}"><button id="qv{{i.id}} " href="#" class="btn btn-primary cart">Quick View</button></a>
              </div>
            </div>
          </div>

          {% if forloop.counter|divisibleby:3 and forloop.counter > 0 and not forloop.last %}
        </div>
        <div class="carousel-item">
          {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
    <!-- Left Right Control for the slide -->
    <a class="carousel-control-prev" href="#myCarousel{{forloop.counter}}" data-slide="prev">
      <span class="carousel-control-prev-icon "></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel{{forloop.counter}}" data-slide="next">
      <span class="carousel-control-next-icon "></span>
    </a>
  </div>
  {% endfor %}
</div>
{% endblock %}

轮播的CSS是这样的：

.carousel-indicators {
bottom: -40px;

}

.carousel-indicators li{
width: 10px;
height: 10px;
border-radius: 50%;
}

body .carousel-indicators li{
background-color: green

}

body .carousel-control-prev-icon,
body .carousel-control-next-icon{
background-color:green;
}

.carousel-control-prev,
.carousel-control-next{
top:auto;
bottom:auto;
padding-top:160px;

}

用于计算轮播的幻灯片数量的我的views.py文件是这样的：

def index(request):
    allProds = []
    catProds = Product.objects.values('category')
    cats = {item['category'] for item in catProds}
    for cat in cats:
        prod = Product.objects.filter(category = cat)
        n = len(prod)
        nSlides = n//4 + ceil((n/4) - (n//4))
        allProds.append([prod, range(1, nSlides), nSlides])
        params = {'allProds': allProds}
    return render(request, 'shop/index.html', params)

我无法弄清楚为什么这不起作用。页面上的某些按钮还将链接显示为http://127.0.0.1:8000/shop/#myCarousel4。请帮我解决一下这个。在此先感谢！

轮播无法正确加载

0 个答案: