Merge pull request #2441 from WTTJ/fix-full-width-swiper

fix: computation of slides per view when swiper is full width
WTTJ · May 3, 2024 · efc6c2c · efc6c2c
2 parents 6251a06 + 9a24a71
commit efc6c2c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 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 if (viewportWidth >= screens['4xl'] && fullWidth) {
+      return slidesPerView.desktop + 2
     } else {
       return slidesPerView.desktop
     }
-  }, [slidesPerView, screens.md, screens.lg, viewportWidth])
+  }, [fullWidth, 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`