<div id="promotions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for o in objs %}
            {% if o.featureImage %}
            <li data-target="#promotions" data-slide-to="{{ forloop.counter0 }}"></li>
            {% endif %}
        {% endfor %}
    </ol>
  <div class="carousel-inner">
      {% for o in objs %}
        {% if o.featureImage %}
        <div class="carousel-item {{ forloop.first|yesno:"active," }}">
                <div class='img-container-16-9'>
                <img src="{{ o.featureImage.url }}" class="d-block w-100 media" alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block">
                    <a href='https://www.google.com' class='text-decoration-none text-white'>
                    <h5>{{ o.title }}</h5>
                    <p>{{ o.description }}</p></a>
                </div>
            </div>
        {% endif %}
      {% endfor %}
  </div>
   <button class="carousel-control-prev border-0" type="button" data-target="#promotions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next border-0" type="button" data-target="#promotions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>
