带有 django 和 bootstrap 的动态轮播答案

【问题标题】：Dynamic carousel with django and bootstrap带有 django 和 bootstrap 的动态轮播
【发布时间】：2014-08-14 17:53:36
【问题描述】：

我正在使用轮播展示一些评价最高的产品，轮播工作但我无法正常工作，似乎问题出在“活跃”类。每个“幻灯片”显示 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>

【问题讨论】：

我不认为这是 django 的问题。请参阅输出 html。输出中有active 类吗？循环中是否创建了所有divs？
创建了 div，但每次只显示一个产品，而不是 4 个产品。
那么很可能是你的轮播有问题。
每行只有一列，而不是一行中有 4 个 col-sm-3 div。
@x3al 没错，这就是我现在所拥有的

标签： django twitter-bootstrap

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

【讨论】：

感谢您的回答。我都试过了，但我得到了 4 行，每行 1 个产品。并且滑块仅在第一行左右移动。

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

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

我希望这可以帮助一些未来的居民。

【讨论】：