fix: swiper item width when there is less than x items

WTTJ · Sep 30, 2024 · a575f9f · a575f9f
1 parent 4ceff5b
commit a575f9f
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/packages/Swiper/src/styles.ts b/packages/Swiper/src/styles.ts
@@ -116,6 +116,7 @@ export const Container = styled.ulBox<
       list-style-type: none;
       margin-right: ${spaceBetween};
       min-width: ${getSlideWidth(mobile, spaceBetween, theme.toRem)};
+      max-width: ${getSlideWidth(mobile, spaceBetween, theme.toRem)};
       flex: 1;
 
       &:last-child {
@@ -128,6 +129,7 @@ export const Container = styled.ulBox<
       css`
         > * {
           min-width: ${getSlideWidth(mobile, spaceBetween, theme.toRem)};
+          max-width: ${getSlideWidth(mobile, spaceBetween, theme.toRem)};
 
           &:nth-of-type(${mobile}n + 1) {
             scroll-snap-align: start;
@@ -141,6 +143,7 @@ export const Container = styled.ulBox<
       css`
         > * {
           min-width: ${getSlideWidth(tablet, spaceBetween, theme.toRem)};
+          max-width: ${getSlideWidth(tablet, spaceBetween, theme.toRem)};
 
           &:nth-of-type(${tablet}n + 1) {
             scroll-snap-align: start;
@@ -154,6 +157,8 @@ export const Container = styled.ulBox<
       css`
         > * {
           min-width: ${getSlideWidth(desktop, spaceBetween, theme.toRem)};
+          max-width: ${getSlideWidth(desktop, spaceBetween, theme.toRem)};
+
           scroll-snap-align: unset;
 
           &:nth-of-type(${desktop}n + 1) {
@@ -173,6 +178,7 @@ export const Container = styled.ulBox<
       css`
         > * {
           min-width: ${getSlideWidth(desktop + 2, spaceBetween, theme.toRem)};
+          max-width: ${getSlideWidth(desktop + 2, spaceBetween, theme.toRem)};
         }
       `}
     }