我有N个物品的清单。需要在不同的div中显示每四个项目

Question

我需要安装转盘/滑块。它必须连续显示最多四个项目，然后下一张幻灯片有四个项目，依此类推。我有一个后端项目列表，想要在第一张幻灯片中显示它的前4个元素，然后在下一张幻灯片中显示下四个项目，依此类推。 我有一个显示硬编码项目的html模板，但我想在这里显示动态数据（下一张幻灯片在item div上的循环，而col-md-3 div上的内部循环在一张幻灯片中显示4项）。

<div class="carousel-inner">
   <div class="item  active">
       <div class="row">
            <div class="col-md-3">
                <div class="item-slider">
                   <a class="thumbnail" href="#"><img alt="" src="{% 
                       static 'images/t1.jpg' %}"></a>
                    <div class="item-cont">
                       <h3>Title</h3>
                        <p>Description</p>
                         <a href="#" class="btn orange-btn btn-block 
                         more-btn" data-toggle="modal" data- 
                         target="#tenants1">More Details</a>
                     </div>
                </div>
                <div class="col-md-3">
                   <div class="item-slider">
                      <a class="thumbnail" href="#"><img alt="" src="{% 
                       static 'images/t1.jpg' %}"></a>
                      <div class="item-cont">
                         <h3>Title</h3>
                         <p>Description</p>
                         <a href="#" class="btn orange-btn btn-block 
                         more-btn" data-toggle="modal" data- 
                         target="#tenants1">More Details</a>
                     </div>
                </div>
        </div>
      </div>
   /// AGAIN LOOP ITERATION ON ITEM DIV FOR NEXT SLIDE.

<div class="item  active">
       <div class="row">
            <div class="col-md-3">
                <div class="item-slider">
                   <a class="thumbnail" href="#"><img alt="" src="{% 
                       static 'images/t1.jpg' %}"></a>
                    <div class="item-cont">
                       <h3>Title</h3>
                        <p>Description</p>
                         <a href="#" class="btn orange-btn btn-block 
                         more-btn" data-toggle="modal" data- 
                         target="#tenants1">More Details</a>
                     </div>
                </div>
                <div class="col-md-3">
                   <div class="item-slider">
                      <a class="thumbnail" href="#"><img alt="" src=" 
                      {% static 'images/t1.jpg' %}"></a>
                      <div class="item-cont">
                         <h3>Title</h3>
                         <p>Description</p>
                         <a href="#" class="btn orange-btn btn-block 
                         more-btn" data-toggle="modal" data- 
                         target="#tenants1">More Details</a>
                     </div>
                </div>
        </div>
      </div>
</div>


I need to apply 2 loops (1st for slider and 2nd to show four items in  slider)