added custom dynamic bullet to swiper-container on publications

src/app/pages/publications/view-publications/view-publications.page.html

@@ -45,7 +45,7 @@
         <ion-card-content>
 
 
-              <swiper-container [modules]="swiperModules" [pagination]="{clickable: true, dynamicBullets: true }">
+              <swiper-container #swiper [modules]="swiperModules" [preloadImages]="false" [slidechange]="onSlideChange()">
               <swiper-slide *ngFor="let files of publication.Files let k = index">
                 <div >
                   <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
@@ -65,6 +65,14 @@
 
             </div> -->
 
+            <div class="dots-container">
+              <span *ngFor="let files of publication.Files; let k = index" 
+                [class.dotsSwiper]="true" 
+                [class.active-dot]="swiperIndex === k"
+                (click)="goToSlide(k)">
+              </span>
+            </div>
+
           <div (click)="goToPublicationDetail(publication.DocumentId, publication.ProcessId)" class="post-content" >
             <div class="post-title-time">
               <div class="post-title font-15-em">

src/app/pages/publications/view-publications/view-publications.page.scss

@@ -251,7 +251,7 @@ swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #ffff;
-  display: flex;
+  display: inline;
   justify-content: center;
   align-items: center;
 }
@@ -275,6 +275,7 @@ swiper-slide img {
   background: black;
 }
 
+
 swiper-slide video {
   width: 100%;
   height: 100%;
@@ -300,3 +301,25 @@ swiper-slide video {
     display: none !important;
   }
 }
+
+.dotsSwiper {
+  height: 10px;
+  width: 10px;
+  background-color: gray;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.active-dot {
+  background-color: black;
+}
+
+.dots-container {
+  width: 100%;
+  text-align: center;
+}
+
+.dots-container span {
+  display: inline-block; /* Display dots in a row */
+  margin-right: 5px;
+}

src/app/pages/publications/view-publications/view-publications.page.ts

@@ -43,6 +43,8 @@ export class ViewPublicationsPage implements OnInit {
   publicationDitails: any;
   getpublication = [];
   private videoUrl: any;
+  swiperIndex: number = 0;
+
   slideOpts = {
     initialSlide: 0,
     speed: 400,
@@ -56,6 +58,8 @@ export class ViewPublicationsPage implements OnInit {
 
   @ViewChild('VideoManager') VideoManager;
   @ViewChildren('videoElement') videoElements: QueryList<ElementRef>;
+  @ViewChild('swiper')
+  swiperRef: ElementRef | undefined;
 
   constructor(
     private modalController: ModalController,
@@ -396,5 +400,17 @@ export class ViewPublicationsPage implements OnInit {
       return [];
     }
   }
+
+
+  //click custom bullet go to slide
+  goToSlide(index: number) {
+    this.swiperIndex = this.swiperRef?.nativeElement.swiper.activeIndex;
+    this.swiperRef?.nativeElement.swiper.slideTo(index);
+    console.log('index slide', index)
+  }
+
+  onSlideChange() {
+    this.swiperIndex = this.swiperRef?.nativeElement.swiper.activeIndex;
+  }
 }