Django 多个活动项目轮播答案

【问题标题】：Django multiple active item carouselDjango 多个活动项目轮播
【发布时间】：2017-10-27 13:31:10
【问题描述】：

我正在从数据库中提取产品并尝试将它们显示在屏幕上的多个帧/轮播项目中，而不是使用 for 循环的单个项目。

这是我的轮播目前的样子，因为您会注意到只显示一个项目，但我希望它在一张幻灯片上显示 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>

【问题讨论】：

标签： django carousel

【解决方案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>

【讨论】：