Hello. On the main page of 'base.html' I want to display the image slider in three blocks.

enter image description here

Bootstrap code (markup itself):

<div class="container"> <div class="row"> <div class="col-xs-12"> <div id='imageCarousel' class="carousel slide" data-interval='3000' data-ride='carousel'> <div class="carousel-inner"> <!-- Первый блок из трех слайдов --> <!-- Первый элемент должен иметь класс active --> <div class='item active'> <div class="col-xs-4"> <img src='http://m1.daumcdn.net/cfile203/original/2558E1445323B75C333A4C' class="img-responsive" /> </div> <div class='col-xs-4'> <img src='http://i.imgur.com/ADpnVqL.jpg?fb' class="img-responsive" /> </div> <div class='col-xs-4'> <img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT0hQax-qRSiMYXBXXGy3sxNIMaAuMZTWbBWGUczG0tGyNe_c5kwA' class="img-responsive" /> </div> </div> <!-- Второй блок из трех слайдов --> <div class='item'> <div class="col-xs-4"> <img src='https://lh3.googleusercontent.com/-xIsQRVcjvAc/VtQn9SAws7I/AAAAAAAAAJc/mdtp88w4Nb4/w506-h750/LION-RAINBOW-ART.jpg' class="img-responsive" /> </div> <div class='col-xs-4'> <img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTas2u0NIPpYQpLAE8G2rjOui8ntxRVgPFmeKhUj0xub0Elg50q' class="img-responsive" /> </div> <div class='col-xs-4'> <img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSyLwR9OozPx5YReXWRcwk5e1ysWf8lts3xLrxmlmkTnVXvoqxM' class="img-responsive" /> </div> </div> </div> </div> </div> </div>

Cycle:

 <div class='item'> {% for obj in img_list %} <div class='col-xs-4'> <img src='{{ obj.image.url|safe }}' class="img-responsive" /> </div> {% endfor %} </div>

It is necessary that the cycle ran through all the images and grouped them into three, wrapping them in the right tags.

In 'base.html':

 <div class="container"> <div class="row"> <div class="col-xs-12"> <div id='imageCarousel' class="carousel slide" data- interval='3000' data-ride='carousel'> <div class="carousel-inner"> <div class='item active'> {% include 'partners.html' %} </div> </div> </div> </div> </div> </div>

Advise a solution. Thank!

    1 answer 1

    As an option that first came to mind - to give a list of lists to a template, i.e. img_list = [[img1,img2, img3], [img4,img5,img6]...] and then:

     {% for obj in img_list %} <div class='item'> {% for el in obj %} <div class='col-xs-4'> <img src='{{ el.image.url|safe }}' class="img-responsive" /> </div> {% endfor %} </div> {% endfor %}