fix(core): fix cases when spaceBetween set in %

fixes #6647

Author: nolimits4web

src/core/update/updateSlides.js

@@ -60,6 +60,8 @@ export default function updateSlides() {
   }
   if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
     spaceBetween = (parseFloat(spaceBetween.replace('%', '')) / 100) * swiperSize;
+  } else if (typeof spaceBetween === 'string') {
+    spaceBetween = parseFloat(spaceBetween);
   }
 
   swiper.virtualSize = -spaceBetween;
@@ -194,10 +196,10 @@ export default function updateSlides() {
   swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;
 
   if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
-    wrapperEl.style.width = `${swiper.virtualSize + params.spaceBetween}px`;
+    wrapperEl.style.width = `${swiper.virtualSize + spaceBetween}px`;
   }
   if (params.setWrapperSize) {
-    wrapperEl.style[getDirectionLabel('width')] = `${swiper.virtualSize + params.spaceBetween}px`;
+    wrapperEl.style[getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`;
   }
 
   if (gridEnabled) {
@@ -244,7 +246,7 @@ export default function updateSlides() {
   }
   if (snapGrid.length === 0) snapGrid = [0];
 
-  if (params.spaceBetween !== 0) {
+  if (spaceBetween !== 0) {
     const key = swiper.isHorizontal() && rtl ? 'marginLeft' : getDirectionLabel('marginRight');
     slides
       .filter((_, slideIndex) => {
@@ -262,9 +264,9 @@ export default function updateSlides() {
   if (params.centeredSlides && params.centeredSlidesBounds) {
     let allSlidesSize = 0;
     slidesSizesGrid.forEach((slideSizeValue) => {
-      allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
+      allSlidesSize += slideSizeValue + (spaceBetween || 0);
     });
-    allSlidesSize -= params.spaceBetween;
+    allSlidesSize -= spaceBetween;
     const maxSnap = allSlidesSize - swiperSize;
     snapGrid = snapGrid.map((snap) => {
       if (snap < 0) return -offsetBefore;
@@ -276,9 +278,9 @@ export default function updateSlides() {
   if (params.centerInsufficientSlides) {
     let allSlidesSize = 0;
     slidesSizesGrid.forEach((slideSizeValue) => {
-      allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
+      allSlidesSize += slideSizeValue + (spaceBetween || 0);
     });
-    allSlidesSize -= params.spaceBetween;
+    allSlidesSize -= spaceBetween;
     if (allSlidesSize < swiperSize) {
       const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
       snapGrid.forEach((snap, snapIndex) => {

src/core/update/updateSlidesProgress.js

@@ -18,6 +18,13 @@ export default function updateSlidesProgress(translate = (this && this.translate
   swiper.visibleSlidesIndexes = [];
   swiper.visibleSlides = [];
 
+  let spaceBetween = params.spaceBetween;
+  if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
+    spaceBetween = (parseFloat(spaceBetween.replace('%', '')) / 100) * swiper.size;
+  } else if (typeof spaceBetween === 'string') {
+    spaceBetween = parseFloat(spaceBetween);
+  }
+
   for (let i = 0; i < slides.length; i += 1) {
     const slide = slides[i];
     let slideOffset = slide.swiperSlideOffset;
@@ -27,13 +34,13 @@ export default function updateSlidesProgress(translate = (this && this.translate
 
     const slideProgress =
       (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) /
-      (slide.swiperSlideSize + params.spaceBetween);
+      (slide.swiperSlideSize + spaceBetween);
     const originalSlideProgress =
       (offsetCenter -
         snapGrid[0] +
         (params.centeredSlides ? swiper.minTranslate() : 0) -
         slideOffset) /
-      (slide.swiperSlideSize + params.spaceBetween);
+      (slide.swiperSlideSize + spaceBetween);
     const slideBefore = -(offsetCenter - slideOffset);
     const slideAfter = slideBefore + swiper.slidesSizesGrid[i];
     const isVisible =

src/modules/grid/grid.js

@@ -10,6 +10,16 @@ export default function Grid({ swiper, extendParams }) {
   let slidesPerRow;
   let numFullColumns;
 
+  const getSpaceBetween = () => {
+    let spaceBetween = swiper.params.spaceBetween;
+    if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
+      spaceBetween = (parseFloat(spaceBetween.replace('%', '')) / 100) * swiper.size;
+    } else if (typeof spaceBetween === 'string') {
+      spaceBetween = parseFloat(spaceBetween);
+    }
+    return spaceBetween;
+  };
+
   const initSlides = (slidesLength) => {
     const { slidesPerView } = swiper.params;
     const { rows, fill } = swiper.params.grid;
@@ -26,7 +36,8 @@ export default function Grid({ swiper, extendParams }) {
   };
 
   const updateSlide = (i, slide, slidesLength, getDirectionLabel) => {
-    const { slidesPerGroup, spaceBetween } = swiper.params;
+    const { slidesPerGroup } = swiper.params;
+    const spaceBetween = getSpaceBetween();
     const { rows, fill } = swiper.params.grid;
     // Set slides order
     let newSlideOrderIndex;
@@ -66,7 +77,8 @@ export default function Grid({ swiper, extendParams }) {
   };
 
   const updateWrapperSize = (slideSize, snapGrid, getDirectionLabel) => {
-    const { spaceBetween, centeredSlides, roundLengths } = swiper.params;
+    const { centeredSlides, roundLengths } = swiper.params;
+    const spaceBetween = getSpaceBetween();
     const { rows } = swiper.params.grid;
     swiper.virtualSize = (slideSize + spaceBetween) * slidesNumberEvenToRows;
     swiper.virtualSize = Math.ceil(swiper.virtualSize / rows) - spaceBetween;