Django 다중 활성 항목 회전 목마

Question

나는 데이터베이스에서 제품을 가져 와서 for 루프를 사용하는 단일 항목보다는 여러 프레임/회전식 항목을 화면에 표시하려고합니다.

하나의 항목 만 표시되지만 하나의 슬라이드에는 4 개의 항목을 표시하고 화살표 버튼을 클릭하면 다음 4 개의 항목을 표시하기 때문에 현재 내 캐로 셀이 생겼습니다. click here to see my carousel image. 내 장고 코드는 다음과 뭔가를이 항아리

<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

시도처럼 보인다 :

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