我从数据库中提取产品并尝试在屏幕上的多个框架/项目中显示它们,而不是使用for循环显示单个项目。
这就是我目前的旋转木马的样子,因为你会发现只显示了一个项目,但是我想让它在一张幻灯片上显示4个项目,然后在点击箭头按钮上显示4个项目,依此类推。 click here to see my carousel image. 我的Django代码看起来像这样 -
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for prod in pro %}
<div class="item{% if forloop.first %} active{% endif %}">
<div class="col-sm-3">
<div class="product-image-wrapper1">
<div class="single-products">
<div class="productinfo text-center">
<!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" />
<h2>{{prod.productname}}</h2>
<p>{{prod.producttype}}</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
答案 0 :(得分:1)
尝试做这样的事情:
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for prod in pro %}
<div class="col-sm-3">
<div class="product-image-wrapper1">
<div class="single-products">
<div class="productinfo text-center">
<!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" />
<h2>{{prod.productname}}</h2>
<p>{{prod.producttype}}</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and not forloop.last %}
</div>
<div class="item">
{% endif %}
{% endfor %}
</div>
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>