У меня есть список из N предметов.нужно показывать каждые четыре элемента в разных div

Question

Мне нужно реализовать карусель / слайдер.который должен отображать максимум четыре элемента подряд, а затем следующие слайды содержат 4 элемента и так далее.У меня есть список элементов с бэк-энда, и я хочу показать его первые 4 элемента на 1-м слайде, а затем следующие 4 элемента на следующем слайде и так далее.У меня есть шаблон HTML, который показывает элементы с жесткой кодировкой, но я хочу показать здесь динамические данные (цикл на элементе div для следующих слайдов и цикл внутри столбца col-md-3 для отображения 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)