swiper component added to web

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

@@ -52,6 +52,7 @@ ion-toolbar {
 .div-title {
   /* padding: 0!important; */
   float: left;
+  margin-top: 100px;
 }
 
 .post-img {

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

@@ -47,6 +47,8 @@
           <div  style="width: 100%; height: 395px;">
             <app-swiper
             [publicationList]=publication
+            [navigation]="false"
+            [pagination]="true"
           ></app-swiper>
           </div>
 

src/app/shared/publication/new-publication/new-publication.module.ts

@@ -9,6 +9,7 @@ import { NewPublicationPageRoutingModule } from './new-publication-routing.modul
 import { NewPublicationPage } from './new-publication.page';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { SwiperPageModule } from 'src/app/shared/swiper/swiper.module';
 
 @NgModule({
   imports: [
@@ -18,6 +19,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     NewPublicationPageRoutingModule,
     MatProgressBarModule,
     FontAwesomeModule,
+    SwiperPageModule
   ],
   exports: [NewPublicationPage],
   declarations: [NewPublicationPage]

src/app/shared/publication/view-publications/view-publications.module.ts

@@ -10,6 +10,7 @@ import { Attributes, IntersectionObserverHooks, LazyLoadImageModule, LAZYLOAD_IM
 import { PublicationCardPageModule  } from './publication-card/publication-card.module'
 import { ShowMorePageModule } from './show-more/show-more.module';
 import { VisibilityDirective } from 'src/app/services/directives/visibility.directive';
+import { SwiperPageModule } from 'src/app/shared/swiper/swiper.module';
 export class LazyLoadImageHooks extends IntersectionObserverHooks {
 setup(attributes: Attributes) {
   attributes.offset = 10;
@@ -28,7 +29,8 @@ setup(attributes: Attributes) {
     LazyLoadImageModule,
     // page
     ShowMorePageModule,
-    PublicationCardPageModule
+    PublicationCardPageModule,
+    SwiperPageModule
   ],
   exports: [ViewPublicationsPage],
   declarations: [ViewPublicationsPage, VisibilityDirective],

src/app/shared/publication/view-publications/view-publications.page.html

@@ -42,6 +42,14 @@
     <ion-card *ngFor="let publication of publicationFolderService.publicationList[folderId] let i = index">
       <ion-card-content>
 
+        <div  style="width: 100%; height: 395px;">
+            <app-swiper
+            [publicationList]=publication
+            [navigation]="true"
+            [pagination]="false"
+          ></app-swiper>
+          </div>
+<!-- 
         <swiper-container [config]="swiperThumbsConfig" [modules]="swiperModules" [speed]=400 navigation="true" [pagination]="{clickable: true, dynamicBullets: true }">
           <swiper-slide *ngFor="let files of publication.Files let k = index" class="centered-slide">
             <div class="cool">
@@ -58,7 +66,7 @@
               </div>
             </div>
 
-          </swiper-slide>
+          </swiper-slide> -->
 
           <!-- <div *ngIf="publication?.Files?.length == 0">
             12
@@ -83,7 +91,7 @@
         ">
           <div>arrow-rights</div>
         </div>s -->
-        </swiper-container>
+       <!--  </swiper-container> -->
 
         <div class="post-content" (click)="viewPublicationDetail(publication.DocumentId, publication.ProcessId)">
           <div class="post-title-time">

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

@@ -5,7 +5,7 @@
 </ion-header> -->
 
 <ion-content>
-  <swiper-container #swipers [slidechange]="onSlideChange()" >
+  <swiper-container #swipers [slidechange]="onSlideChange()" [navigation]="navigation">
     <swiper-slide *ngFor="let files of publicationList.Files let k = index">
       <div >
         <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
@@ -29,7 +29,7 @@
 </ion-content>
 
 <ion-footer>
-  <div *ngIf="publicationList?.Files?.length > 1" class="dots-container">
+  <div *ngIf="pagination && 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"

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

@@ -13,6 +13,8 @@ export class SwiperPage implements OnInit {
 
 
   @Input() publicationList: any;
+  @Input() navigation: boolean;
+  @Input() pagination: boolean;
   swiperIndex: number = 0;
 
   @ViewChild('VideoManager') VideoManager;