This is code to implement an exhibit gallery

exhibit_gallery.html

{% block content %}
<!--The line below calls the class where my gallery images are located-->
{% if exhibit %}
<div class= "container_special">
  <!--The forloop counter tells the gallery code which slide to start with. If you want the first one then start with '0' like below-->
<div id="carousel-generic" class="carousel slide" data-ride="carousel" data-interval="0" data-slide-to="{{forloop.counter0}}">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!--These lines tell the items in exhibit to be active until they run out of content i.e. images-->
{% for item in items %}
<div class="item {% if forloop.first %} active {%     endif %}"> 
  <div align="center">
    <!--The line below calls the item in the class where the files have been uploaded in the Admin Panel-->
    <img class="exhibit_img" src='/media/{{item.file_up}}'>
    <!--I like to add in captions for accessibility purposes. Also this slide is turned off so it doesn't automatically scroll. 
    Having a gallery automatically scroll is bad usability because screen readers will constantly restart everytime a new slide comes up-->
    <p> <em>Photo Caption:</em> {{item.caption}}</p>
  </div>
</div>
{% endfor %}
</div>
 <!-- There are the Left and Right Controls to change the pictures -->
  <a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
</div>
{% endif %}
{% endblock %}