title: Django multiple active item carousel
body: <p>I am pulling the products from database and trying to display them in multiple frames/items of carousel on a screen rather than a single item using for loop.</p>
  
  <p>This is what my carousel looks like at present, as you will notice only one item is displayed, but i want it to display 4 items at one slide and next four on clicking arrow button and so on.
  <a href="https://i.stack.imgur.com/NqTvi.png" rel="nofollow noreferrer">click here to see my carousel image.</a>
  my Django code looks like this--</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="recommended-item-carousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;div class="carousel-inner"&gt;
          {% for prod in pro %} 
          &lt;div class="item{% if forloop.first %} active{% endif %}"&gt;
              &lt;div class="col-sm-3"&gt;
                  &lt;div class="product-image-wrapper1"&gt;
                      &lt;div class="single-products"&gt;
                          &lt;div class="productinfo text-center"&gt;
                              &lt;!--sample image, same for all--&gt;&lt;img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" /&gt;
                              &lt;h2&gt;{{prod.productname}}&lt;/h2&gt;
                              &lt;p&gt;{{prod.producttype}}&lt;/p&gt;
                              &lt;a href="#" class="btn btn-default add-to-cart"&gt;&lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;Add to cart&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          {% endfor %}  
      &lt;/div&gt;
      &lt;a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"&gt;
      &lt;i class="fa fa-angle-left"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"&gt;
      &lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;
      &lt;/a&gt;   
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>