使用 django 和 bootstrap 的动态轮播

Question

我正在使用轮播来展示一些最受好评的产品，轮播可以工作，但我无法正常工作，似乎问题出在“活跃”类别上。每张“幻灯片”显示 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 将项目和行放置在每第四行，如下所示：

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