fix: computation of slides per view when swiper is full width

WTTJ · Apr 18, 2024 · 11c29ec · 11c29ec
1 parent 81ec13a
commit 11c29ec
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/Swiper/src/index.tsx b/packages/Swiper/src/index.tsx
@@ -80,10 +80,12 @@ export const useSwiper = (options: UseSwiperProps = {}) => {
       return slidesPerView.mobile
     } else if (viewportWidth <= screens.lg) {
       return slidesPerView.tablet
-    } else {
+    } else if (viewportWidth <= screens['4xl']) {
       return slidesPerView.desktop
+    } else {
+      return slidesPerView.desktop + 2
     }
-  }, [slidesPerView, screens.md, screens.lg, viewportWidth])
+  }, [viewportWidth, screens, slidesPerView])
 
   return {
     centeredSlides,

diff --git a/packages/Swiper/src/styles.ts b/packages/Swiper/src/styles.ts
@@ -166,7 +166,7 @@ export const Container = styled.ul<Pick<UseSwiper, 'slidesPerView' | 'spaceBetwe
         `}
       }
 
-      @media (min-width: 1920px) {
+      @media (min-width: 4xl) {
         ${desktop &&
         fullWidth &&
         css`