Some changes

src/app/pages/publications/view-publications/publication-detail/publication-detail.module.ts

@@ -7,12 +7,14 @@ import { IonicModule } from '@ionic/angular';
 import { PublicationDetailPageRoutingModule } from './publication-detail-routing.module';
 
 import { PublicationDetailPage } from './publication-detail.page';
+import { SwiperPageModule } from 'src/app/shared/swiper/swiper.module';
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
     PublicationDetailPageRoutingModule,
+    SwiperPageModule
   ],
   declarations: [PublicationDetailPage],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

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

@@ -23,7 +23,14 @@
       </div>
 
       <div class="post-item overflow-y-auto">
-        <swiper-container [pagination]="{clickable: true, dynamicBullets: true }">
+
+        <div  style="width: 100%; height: 395px;">
+          <app-swiper
+          [publicationList]=publication
+        ></app-swiper>
+        </div>
+
+       <!--  <swiper-container [pagination]="{clickable: true, dynamicBullets: true }">
           <swiper-slide *ngFor="let files of publication.Files let k = index">
             <div>
               <img *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
@@ -36,7 +43,7 @@
 
             </div>
           </swiper-slide>
-        </swiper-container>
+        </swiper-container> -->
         <!-- <div *ngIf="publication.FileBase64.length < 30" class="post-img">
           <img src="/assets/icon/icon-no-image.svg" alt="image">
         </div> -->

src/app/shared/publication/new-publication/new-publication.page.html

@@ -106,7 +106,7 @@
     </div>
 
 
-    <div *ngIf="checkTableDivice()" >
+    <div *ngIf="!checkDesktop()" >
       <ion-label (click)="loadVideoTablet()" class="cursor-pointer">
         <div class="attach-icon">
           <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>

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.small-dot-after]="k === swiperIndex + 5"
-      [class.next-dot]="swiperIndex === k + 1 || (swiperIndex === publicationList.Files.length - 1 && k === 0)"
+      [class.small-dot-before]="k === swiperIndex - 5"
-      [class.small-dot]="publicationList.Files.length > 4 && (k < swiperIndex - 1 || k > swiperIndex + 1)"
+      [class.smaller-dot-after]="k === swiperIndex + 6"
-      (click)="goToSlide(k)"
+      [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> -->

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

@@ -332,14 +332,27 @@ swiper-slide video {
   margin-right: 5px;
 }
 
-.preview-dot, .next-dot {
+.half-size {
-  width: 7px; /* Reduced size for preview and next dots */
+  transform: scale(0.5); /* Scale the dot size to half */
-  height: 7px; /* Reduced size for preview and next dots */
 }
 
-.small-dot {
+.small-dot-after{
-  width: 5px; /* Smallest size for dots */
+  transform: scale(0.5);
-  height: 5px; /* Smallest size for dots */
+}
+.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() {

src/environments/environment.prod.ts

@@ -4,4 +4,4 @@ import { environment as oaprProd } from './suport/oapr'
 import { DevDev } from './suport/dev'
 
 
-export const environment: Environment = DevDev;
+export const environment: Environment = oaprProd;