edited swiper width and animation

open-template-hub · Sep 5, 2021 · 916fd24 · 916fd24
1 parent 401a92e
commit 916fd24
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/src/app/component/common/swiper-wrapper/swiper-wrapper.component.html b/src/app/component/common/swiper-wrapper/swiper-wrapper.component.html
@@ -2,6 +2,10 @@
     [slidesPerView]="1"
     [spaceBetween]="10"
     [loop]="true"
+    [autoplay]="{
+      delay: 2500,
+      disableOnInteraction: false
+    }"
     [loopFillGroupWithBlank]="true"
     [pagination]="{
       clickable: true
@@ -16,7 +20,7 @@
         slidesPerView: 2,
         spaceBetween: 40
       },
-      '1000': {
+      '1200': {
         slidesPerView: 4,
         spaceBetween: 50
       }

diff --git a/src/app/component/common/swiper-wrapper/swiper-wrapper.component.scss b/src/app/component/common/swiper-wrapper/swiper-wrapper.component.scss
@@ -1,8 +1,15 @@
 @import "~swiper/swiper-bundle.min.css";
 
+app-swiper-wrapper {
+  width: 65%;
+  margin: 0 auto;
+  position: relative;
+}
+
 .swiper {
   width: 100%;
   height: 100%;
+  position: initial;
 }
 
 .swiper-slide {
@@ -31,6 +38,14 @@
   filter: contrast(0);
 }
 
+.swiper-button-prev {
+  left: -40px;
+}
+
+.swiper-button-next {
+  right: -40px;
+}
+
 .swiper-button-next, .swiper-button-prev {
   color: var(--contrast);
 }
@@ -43,8 +58,9 @@
   background: var(--brand-color);
 }
 
+/*
 @media only screen and (max-width: 999px) {
   .swiper-button-next::after, .swiper-button-prev::after {
     display: none;
   }
-}
+}*/
diff --git a/src/app/component/common/swiper-wrapper/swiper-wrapper.component.ts b/src/app/component/common/swiper-wrapper/swiper-wrapper.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
-import SwiperCore, { Navigation, Pagination } from 'swiper';
+import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
 
-SwiperCore.use( [ Pagination, Navigation ] );
+SwiperCore.use( [ Pagination, Navigation, Autoplay ] );
 
 export interface Partner {
   brandLogo: string;