Django複数のアクティブなアイテムカルーセル

Question

私はデータベースから製品を引き出し、forループを使用して1つのアイテムではなく複数のフレーム/カルーセルのアイテムを画面上に表示しようとしています。

これは、1つのアイテムだけが表示されますが、1つのスライドに4つのアイテムを表示し、次に矢印ボタンをクリックすると4つのアイテムを表示するようにしたいので、現在のカルーセルの外観です。 click here to see my carousel image. 私のDjangoのコードはこのような何かやってみ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

次のようになります。

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