<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    [% foreach from=$Attachments item=$Att key=$key %]
        <li data-bs-target="#myCarousel" data-slide-to="[% $key %]" [% if $Att.filename == $selected %]class="active"[% /if %]></li>   
    [% /foreach%]
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
       [% foreach from=$Attachments item=$Att key=$key %]
        <div class="item [% if $Att.filename == $selected %]active[% /if %]">    
            <img class="center-block" src="index.php?module=upload&event=ShowImage&name=thb_[% $Att.filename  %]" alt="[% $Att.filename  %]">
        </div>   
        [% /foreach%]   
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="fa fa-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="fa fa-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
