<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#imageModal">
  Open Modal
</button>

<!-- The Modal -->
<div class="modal fade top" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true" style='height:100vh;background-color: grey;'>
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <!-- Carousel -->
      <div id="imageCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
        {# from parent #}
        {% set isActive = 1 %}
        {% for img in imgA %}
          <div class="carousel-item {{ (isActive==1) ?  'active' : '' }}">
                  <img src="{{ img.getUrl() }}" alt="Image" class="img-fluid" class="d-block w-100" style='height:90vh' alt="Image 1"/>

          </div>
          {% set isActive = 0 %}
        {% endfor %}
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>


      <div class="footer p-2">
      <div class="row">
        <div class="col">
        {% set i = 0 %}
        {% for img in imgA %}
        
          <a data-bs-target="#imageCarousel" data-bs-slide-to="{{i}}">
            <img src="{{ img.getUrl() }}" class='img-thumbnail' style='height:80px' alt="Thumbnail 1">
          </a>
          {% set i = i + 1 %}
        {% endfor %}
        </div>
        
        <div class="col-2">
          <button type="button" class="btn btn-secondary btn-sm mt-3" data-bs-dismiss="modal">Close</button>
        </div>
        
      </div>        
      </div>

    </div>
  </div>
</div>