swiper

src/app/_modules/pages/sections/types/basic/images/images-section.component.html

@@ -33,7 +33,7 @@
   </div>
 
 
-  <div *ngIf="showFullscreen" class="fullscreen">
+  <div *ngIf="showFullscreen" class="fullscreen desctop">
 
     <div class="content center">
       <img [src]="photo"/>      
@@ -41,6 +41,7 @@
     <div class="content between">
       <div class="close"  (click)="showFullscreen = false">
         <img src="/assets/images/icons/close_50.svg"/>
+        
       </div>
       <div *ngIf="items.length > 1" class="left" (click)="go('decrement')">
         <img *ngIf="backId!==''" src="/assets/images/icons/left_50.svg"/>
@@ -57,7 +58,25 @@
   </div>
 </div>
 
-  <!-- <span style="white-space: pre-wrap;">
-    {{items|json}}
-  </span> -->
+<div *ngIf="showFullscreen" class="fullscreen mobile" id="section-{{section.id}}" >
+  <div class="close"  (click)="showFullscreen = false">
+    <img src="/assets/images/icons/close_50.svg"/>
+    
+  </div>
+  <div class="prev" *ngIf="items.length > 1">
+    <img src="/assets/images/icons/left_50.svg"/>
+  </div>
+  <swiper [config]="config">
+    <ng-template ngFor let-item [ngForOf]="items">
+      <ng-template swiperSlide>
+        <div class="slide">
+          <img [src]="item?.links?.full"/>
+        </div>
+      </ng-template>
+    </ng-template>
+  </swiper>
+  <div class="next" *ngIf="items.length > 1">
+    <img src="/assets/images/icons/right_50.svg"/>
+  </div>
+</div>
 

src/app/_modules/pages/sections/types/basic/images/images-section.component.scss

@@ -1,7 +1,18 @@
+.mobile{
+  display: none;
+}
+.desctop{
+  display: flex;
+}
+.close{
+  position: absolute;
+  top:24px;
+  right: 24px;
+}
 .first{
   display: none;
   &.large-preview{
-    display: flex;
+    display: flex;    
     width: 100%;
     max-width: 720px;
     margin-bottom: 8px;
@@ -132,7 +143,6 @@
   right: 0;
   bottom: 0;
   z-index: 2;
-  display: flex;
   position: fixed;
   align-items: center;
   justify-content: center;
@@ -156,11 +166,7 @@
       width: 100%;
   height: 100%;
     }
-    .close{
-      position: absolute;
-      top:24px;
-      right: 24px;
-    }
+
     .left {
       width: 72px;
       flex-grow: 0;
@@ -206,6 +212,12 @@
 }
 
 @media screen and (max-width: 480px) {
+  .desctop{
+    display: none !important;
+  }
+  .mobile{
+    display: flex !important;
+  }
   .fullscreen {
 
    
@@ -215,10 +227,18 @@
       pointer-events: none;
       
       
-      width: calc(100vw - 2 * 16px);
-      height: calc(100vh - 2 * 16px);
-      left: 16px;
-      right: 16px;
+      width:100vw;
+      height:100vh;
+      left: 0;
+      right: 0;
+    }
+    .prev{
+      z-index: 5;
+      margin-right: -50px;
+    }
+    .next{
+      z-index: 5;
+      margin-left: -50px;
     }
   }
 }