autowp/autowp-frontend

<div class="gallery">
  @if (gallery$ | async; as gallery) {
    <div class="carousel slide">
      @if (gallery.useCircleIndicator) {
        <ol class="carousel-indicators">
          @for (item of gallery.items; track i; let i = $index) {
            <li
              (click)="navigateToIndex(i, gallery)"
              (keyup.enter)="navigateToIndex(i, gallery)"
              tabindex="0"
              [class.active]="gallery.current === i"
            ></li>
          }
        </ol>
      } @else {
        <div class="carousel-numbers">{{ gallery.current + 1 }} of {{ gallery.items.length }}</div>
      }
      <div class="carousel-inner">
        @for (item of gallery.items; track i; let i = $index) {
          @if (item && i >= gallery.current - 1 && gallery.current + 1 >= i) {
            <app-gallery-carousel-item
              class="carousel-item"
              [class.active]="(current$ | async) === item.identity"
              [class.previous]="gallery.current > i"
              [class.next]="i > gallery.current"
              [item]="item"
              [prefix]="picturePrefix()"
            />
          }
        }
      </div>
      @if (gallery.current > 0) {
        <button
          type="button"
          class="carousel-control-prev"
          href="#"
          role="button"
          (click)="navigateToIndex(gallery.current - 1, gallery)"
        >
          <i class="bi bi-chevron-left glyphicon glyphicon-chevron-left fs-1" aria-hidden="true"></i>
        </button>
      }
      @if (gallery.items.length - 1 > gallery.current) {
        <button
          type="button"
          class="carousel-control-next"
          href="#"
          role="button"
          (click)="navigateToIndex(gallery.current + 1, gallery)"
        >
          <i class="bi bi-chevron-right glyphicon glyphicon-chevron-right fs-1" aria-hidden="true"></i>
        </button>
      }
      @if (identity$ | async; as identity) {
        <button
          type="button"
          class="carousel-control-close"
          [routerLink]="picturePrefix().concat([identity])"
          role="button"
        >
          <i class="bi bi-x fs-1" aria-hidden="true"></i>
        </button>
      }
    </div>
  }
</div>