Some changes

src/app/shared/swiper/swiper.page.html

@@ -39,16 +39,19 @@
   </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.preview-dot]="swiperIndex === k - 1 || (swiperIndex === 0 && k === publicationList.Files.length - 1)"
-      [class.next-dot]="swiperIndex === k + 1 || (swiperIndex === publicationList.Files.length - 1 && k === 0)"
-      [class.small-dot]="publicationList.Files.length > 4 && (k < swiperIndex - 1 || k > swiperIndex + 1)"
-      (click)="goToSlide(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> -->
+</ion-footer> -->

src/app/shared/swiper/swiper.page.scss

@@ -332,14 +332,27 @@ swiper-slide video {
   margin-right: 5px;
 }
 
-.preview-dot, .next-dot {
-  width: 7px; /* Reduced size for preview and next dots */
-  height: 7px; /* Reduced size for preview and next dots */
+.half-size {
+  transform: scale(0.5); /* Scale the dot size to half */
 }
 
-.small-dot {
-  width: 5px; /* Smallest size for dots */
-  height: 5px; /* Smallest size for dots */
+.small-dot-after{
+  transform: scale(0.5);
+}
+.small-dot-before {
+  transform: scale(0.5);
+}
+.smaller-dot-after{
+  transform: scale(0.3);
+}
+.smaller-dot-before {
+  transform: scale(0.3);
+}
+.visibility-hiden-dot-before {
+  visibility: hidden;
+}
+.visibility-hiden-dot-after {
+ visibility: hidden;
 }
 
 .play-button {

src/app/shared/swiper/swiper.page.ts

@@ -28,9 +28,11 @@ export class SwiperPage implements OnInit {
     public checkFileType: checkFileTypeService,
     public stopvideoService: StopvideoService,
   ) {
+    console.log('Income list',this.publicationList)
   }
 
   ngOnInit() {
+    
   }
 
   onSlideChange() {