swiper container

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

@@ -14,7 +14,7 @@
     </div>
     <div class="center">
       <swiper [config]="config">
-        <ng-template ngFor let-item [ngForOf]="items">
+        <ng-template  ngFor let-item [ngForOf]="items">
           <ng-template swiperSlide>
             <div class="slide">
               <img [src]="item?.links?.full"/>
@@ -23,6 +23,7 @@
         </ng-template>
       </swiper>
     </div>
+
     <div class="next">
       <img src="/assets/images/icons/right_50.svg"/>
     </div>

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

@@ -71,36 +71,36 @@
 }
 
 .carousel {
+
   display: flex;
-  flex-direction: row;
-  justify-content: center;
-  column-gap: 42px;
-  margin-bottom: 20px;
   align-items: center;
-  width: 100%;
+  justify-content:center;
+  gap: 24px;
   .prev, .next {
     cursor: pointer;
+    z-index: 1;
+    &.prev{
+      left:0;
+    }
+    &.next{
+      right:0;
+    }
   }
   .center {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
+    width: 600px;
+
   }
 }
 
 .slide {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  width: 600px;
+  height: 450px;
 
+  display: block;
   img {
-    display: block;
-    width: 100%;
-    height: 450px;
     object-fit: cover;
+    width: 100%;
+    height: 100%;
   }
 }
 

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

@@ -11,7 +11,10 @@ SwiperCore.use([Navigation, Pagination]);
 export class ImagesSectionComponent {
   @Input() section: any;
 
-  public config: SwiperOptions;
+  public config: SwiperOptions = {
+    slidesPerView: 1,
+    spaceBetween: 50
+  };
 
   public parsedPhotos: any[] = []
   public activePhoto: string = ''
@@ -27,10 +30,8 @@ export class ImagesSectionComponent {
 
 
   ngOnInit() {
-    this.config = {
-      slidesPerView: 1,
-      spaceBetween: 40,
-      navigation: {prevEl: `#section-${this.section?.id} .prev`, nextEl: `#section-${this.section?.id} .next`}
+    this.config.navigation = {
+      prevEl: `#section-${this.section?.id} .prev`, nextEl: `#section-${this.section?.id} .next`
     }
 
     setTimeout(()=>{

src/assets/css/_grid.scss

@@ -149,6 +149,14 @@ footer{
   .footer{
     padding: 40px 24px;
   }
+  .space{
+    .layout-corral{
+      max-width: 100vw;
+    }
+  }
+  right-content, left-content{
+    display: none;
+  }
 }
 
 

src/assets/css/_main-menu.scss

@@ -63,8 +63,8 @@ a.logo{
 
 @media screen and (max-width: 1330px){
   .header{
-    >pages-menu.top-menu, >a.vnii{
-      display: none;
+    pages-menu, >a.vnii{
+      display: none !important;
     }
   }