Dynamic carousel with django and bootstrap

Question

I work with a carousel to show some popular products, a carousel works, but I can’t work correctly, it seems that the problem is with the “active” class. Each slide shows 4 products.

This is my code.

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

If I do not use forloop.first, the carousel does not slip. And with this forloop.first, it shows only one element per slide, not 4 elements.

Conclusion in the inspector:

<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

Your problem is that you are trying to make a slide for each product: for each iteration of the loop, you create a new one itemand put one into it 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>

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

Answer 3

try it

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