动态旋转木马与django和bootstrap [英] Dynamic carousel with django and bootstrap

问题描述

我正在和一个旋转木马一起展示一些最受好评的产品，转盘工作，但是我无法正常工作，似乎问题在于活动类。每个幻灯片显示4个产品。

I am working with a carousel to show some top rated products, the carousel works but I cant make work properly it seems that the problem is with the 'active' class . Each 'slide' shows 4 products.

这是我的代码

<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
{% for p in prod %}
<div class="item {% if forloop.first %} active {% endif %}"> // here is the problem
   <div class="row">
     <div class="col-sm-3">
       <h1>{{p.name}}</h1>
     </div>
   </div>
</div>
{% endfor %}
</div>
</div>

如果我不使用forloop.first，转盘不会滑动。而这个forloop.first，它只显示每个幻灯片中的一个项目，而不是4个项目。

If I don't use the forloop.first, the carousel doesn't slide. And with this forloop.first, it shows only one item per slide, instead of 4 items.

检查器中的输出是：

<div class="carousel-inner">
<div class="item active"> 
   <div class="row">
     <div class="col-sm-3"> // Here I expect 4 columns and I get only 1
     </div>
   </div>
</div>
<div class="item">
   <div class="row">
     <div class="col-sm-3">
     </div>
   </div>
</div>
</div>

推荐答案

上面的循环答案是每次关闭该项目。需要一个'结束'循环。这对我有用。Thx x3al！

The cycle answer above was closing the item everytime. Needed an 'end' cycle. This worked for me.. Thx x3al!

<div class="carousel-inner">
                {% for track in track_set.all %}
                {% cycle 'start' '' '' '' '' '' as slidestart silent %}
                    {% cycle '' '' '' '' '' 'end' as slideend silent %}
                {% if slidestart %} <div class="item {% if forloop.first %} active      {%     endif %}"> <div class="row">{% endif %}
                <div class="col-md-2">
                   .. slide code ..
                </div>
                {% if slideend %} </div></div>{% endif %}

                {% endfor %}
            </div>

这篇关于动态旋转木马与django和bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！