doneit-web/src/app/shared/swiper/swiper.page.html

<!-- <ion-header>
  <ion-toolbar>
    <ion-title>swiper</ion-title>
  </ion-toolbar>
</ion-header> -->

<ion-content>
  <swiper-container #swipers [slidechange]="onSlideChange()" >
    <swiper-slide *ngFor="let files of publicationList.Files let k = index">
      <div >
        <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
          [src]="'data:image/jpg;base64,' + files.FileBase64" loading="lazy">

        <video #videoElement [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video"  controls="controls" preload="none"
        playsinline webkit-playsinline="webkit-playsinline" (play)="stopvideoService.registerVideoWithEvent($event)"q>
          <source [src]="files.FileBase64" type="video/mp4">
        </video>

       <!--  <button class="play-button" *ngIf="!videoPlaying && checkFileType.checkFileType(files.FileExtension ) == 'video'">
          ▶
        </button> -->

      </div>
    </swiper-slide>

  </swiper-container>


</ion-content>

<ion-footer>
  <div *ngIf="publicationList?.Files?.length > 1" class="dots-container">
    <span *ngFor="let files of publicationList.Files; let k = index"
      [class.dotsSwiper]="true"
      [class.active-dot]="swiperIndex === k"
      (click)="goToSlide(k)"
      >
    </span>
  </div>
</ion-footer>


<!-- <ion-footer>
  <div *ngIf="publicationList.Files.length > 1" class="dots-container">
    <span *ngFor="let files of publicationList.Files; let k = index" 
      [class.dotsSwiper]="true" 
      [class.active-dot]="swiperIndex === k"
      [class.small-dot-after]="k === swiperIndex + 5"
      [class.small-dot-before]="k === swiperIndex - 5"
      [class.smaller-dot-after]="k === swiperIndex + 6"
      [class.smaller-dot-before]="k === swiperIndex - 6"
      [class.visibility-hiden-dot-after]="k === swiperIndex + 7"
      [class.visibility-hiden-dot-before]="k === swiperIndex - 7"
      (click)="goToSlide(k)">
    </span>
  </div>
</ion-footer> -->