Django mehrere aktive Artikel Karussell

Question

Ich ziehe die Produkte aus der Datenbank und versuchen, sie in mehreren Frames/Elemente des Karussells auf einem Bildschirm statt ein einzelnes Element mit for-Schleife anzuzeigen.

So sieht mein Karussell zur Zeit aus, da Sie feststellen, dass nur ein Objekt angezeigt wird, aber ich möchte, dass es 4 Elemente auf einer Folie und die nächsten vier auf der Pfeilschaltfläche usw. anzeigt. click here to see my carousel image. meine Django-Code sieht aus wie this--

<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner"> 
 
     {% for prod in pro %} 
 
     <div class="item{% if forloop.first %} active{% endif %}"> 
 
      <div class="col-sm-3"> 
 
       <div class="product-image-wrapper1"> 
 
        <div class="single-products"> 
 
         <div class="productinfo text-center"> 
 
          <!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" /> 
 
          <h2>{{prod.productname}}</h2> 
 
          <p>{{prod.producttype}}</p> 
 
          <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     {% endfor %} 
 
    </div> 
 
    <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> 
 
    <i class="fa fa-angle-left"></i> 
 
    </a> 
 
    <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> 
 
    <i class="fa fa-angle-right"></i> 
 
    </a> \t \t \t 
 
</div>

Answer 1

Versuch, so etwas zu tun:

<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel"> 
<div class="carousel-inner">   
    <div class="item active"> 
    {% for prod in pro %} 
     <div class="col-sm-3"> 
      <div class="product-image-wrapper1"> 
       <div class="single-products"> 
        <div class="productinfo text-center"> 
         <!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" /> 
         <h2>{{prod.productname}}</h2> 
         <p>{{prod.producttype}}</p> 
         <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> 
        </div> 
       </div> 
      </div> 
     </div> 
     {% if forloop.counter|divisibleby:4 and not forloop.last %} 
     </div> 
     <div class="item"> 
     {% endif %} 
    {% endfor %} 
    </div> 
</div> 
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> 
<i class="fa fa-angle-left"></i> 
</a> 
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> 
<i class="fa fa-angle-right"></i> 
</a>