Question

我正在使用旋转木马来展示一些评价最高的产品，旋转木马有效，但我无法正常工作，似乎问题出在“活跃”的问题上。上课。每个＆＃39;幻灯片＆＃39;显示4个产品。

这是我的代码

<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个项目。

检查员的输出是：

<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>

Answer 1

您的问题是，您尝试为每个产品制作幻灯片：对于循环的每次迭代，您都要创建一个新的item并将col-sm-3放入其中。

您可以更改视图以将嵌套结构传递给模板或尝试执行以下操作：

<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
{% for p in prod %}
  {% cycle 'yes' '' '' '' as slidestart silent %}
    {% if slidestart %} <div class="item {% if forloop.first %} active {% endif %}"> <div class="row">{% endif %}
       <div class="col-sm-3">
         <h1>{{p.name}}</h1>
       </div>
 {% if slidestart %} </div></div>{% endif %}
{% endfor %}
</div>
</div>

或使用forloop.counter将你的项目和行放在第4行：

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

Answer 2

上面的循环答案是每次关闭项目。需要一个'结束'周期。这对我有用.. 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>

Answer 3

试试这个

<div {% if forloop.first %} class="item active" {% else %} class="item" {% endif %}>

Answer 4

我想使用此代码制作3列的轮播，但问题是object_list的项目数无法按列数进行划分。

例如：它可用于6列，因为6％3 = 0，但不适用于5列，因为5％3！= 0

问题在于循环永远不会到达滑块并过早停止，因此我不得不更改最后一个if语句。

<div class="bs-news-wrapper">
    {% for a in articles %}
    {% cycle 'start' '' '' as slidestart silent %}
    {% cycle '' '' 'end' as slidend silent %}
    {% if slidestart %}<div class="item{% if forloop.first %} active {% endif %}"> 
       <div class="row">{% endif %}
         <div class="col-md-4">
           #content
         </div>
    {% if not slidend and forloop.last or slidend %}
       </div>
    </div>{% endif %}
    {% endfor %}
</div>

更改在这一行：

{% if not slidend and forloop.last or slidend %}

我希望这对将来的居民有帮助。

动态旋转木马与django和bootstrap

4 个答案: