javascript - Bootstrap Carousel in Mezzanine -

i have bootstrap carousel of mezzanine galleries. basically; pulling in images , want have single row of 3 images carouse ling. here working snippet of code hate; make work unlimited number of images.

    {% if page.docpage.gallery %}         <script src="{% static "mezzanine/js/magnific-popup.js" %}"></script>         <link rel="stylesheet" href="{% static "mezzanine/css/magnific-popup.css" %}">         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">           <ol class="carousel-indicators">             <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>             <li data-target="#carousel-example-generic" data-slide-to="1"></li>             <li data-target="#carousel-example-generic" data-slide-to="2"></li>           </ol>             {% page.docpage.gallery.gallery.images.all images %}           <!-- wrapper slides -->           <div class="carousel-inner" role="listbox">             {% image in images %}                 {% cycle '<div class="item active">' '' '' '<div class="item">' '' '' '<div class="item">' '' ''%}                 {% cycle '<div class="gallery row"><div class="col-xs-12 col-sm-12">' '' ''%}                                 <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">                                 <img class="img-responsive" src="{{ media_url }}{% thumbnail image.file 200 200 %}"></a>                 {% cycle '' '' '</div></div></div>'%}             {% endfor %}                  </div>           </div>           {% endwith %}       {% endif %} 

i cycling through images , adding other nested tags required. i've played around tracking loop through forloop.counter|divisibleby:3, found closing divs not being applies correctly.

does have ideas on how make work in jinja/django/mezzanine?

otherwise can whip javascript job done.

thanks

trying perform logic in template isn't ideal, have discovered. suggest in view function. along these lines:

# handy function split list equal sized groups, # see http://stackoverflow.com/a/434328/3955830 def chunker(seq, size):     return (seq[pos:pos + size] pos in xrange(0, len(seq), size))  # split images groups of 3 image_groups = chunker(images, 3)  # pass image_groups template context. # if in class based view can in # get_context_data() method. 

then in template, things simpler:

{% group in image_groups %}     <div class="item {% if forloop.first %}active{% endif %}">         <div class="gallery row">             <div class="col-xs-12 col-sm-12">             {% image in group %}                 <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">                 <img class="img-responsive" src="{{ media_url }}{% thumbnail image.file 200 200 %}"></a>             {% endfor %}             </div>         </div>     </div> {% endfor %}