feat(virtual): patch for very large sliders using virtual slides (#6533)

* patch for large virtual slide containers exceeding browser position limits

functional for my purposes

* should also fix some of the effects

I have no idea what I'm doing

* effects not working

* Update updateSlidesOffset.js

Author: dylan1951

src/core/core.js

@@ -164,6 +164,12 @@ class Swiper {
       velocity: 0,
       animating: false,
 
+      cssOverflowAdjustment() {
+        // Returns 0 unless `translate` is > 2**23
+        // Should be subtracted from css values to prevent overflow
+        return Math.trunc(this.translate / 2**23) * 2**23;
+      },
+
       // Locks
       allowSlideNext: swiper.params.allowSlideNext,
       allowSlidePrev: swiper.params.allowSlidePrev,

src/core/translate/getTranslate.js

@@ -13,6 +13,7 @@ export default function getSwiperTranslate(axis = this.isHorizontal() ? 'x' : 'y
   }
 
   let currentTranslate = getTranslate(wrapperEl, axis);
+  currentTranslate += swiper.cssOverflowAdjustment();
   if (rtl) currentTranslate = -currentTranslate;
 
   return currentTranslate || 0;

src/core/translate/setTranslate.js

@@ -16,13 +16,19 @@ export default function setTranslate(translate, byController) {
     y = Math.floor(y);
   }
 
+  swiper.previousTranslate = swiper.translate;
+  swiper.translate = swiper.isHorizontal() ? x : y;
+
   if (params.cssMode) {
     wrapperEl[swiper.isHorizontal() ? 'scrollLeft' : 'scrollTop'] = swiper.isHorizontal() ? -x : -y;
   } else if (!params.virtualTranslate) {
+    if (swiper.isHorizontal()) {
+      x -= swiper.cssOverflowAdjustment();
+    } else {
+      y -= swiper.cssOverflowAdjustment();
+    }
     wrapperEl.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
   }
-  swiper.previousTranslate = swiper.translate;
-  swiper.translate = swiper.isHorizontal() ? x : y;
 
   // Check if we need to update progress
   let newProgress;

src/core/update/updateSlidesOffset.js

@@ -9,6 +9,8 @@ export default function updateSlidesOffset() {
     : 0;
   for (let i = 0; i < slides.length; i += 1) {
     slides[i].swiperSlideOffset =
-      (swiper.isHorizontal() ? slides[i].offsetLeft : slides[i].offsetTop) - minusOffset;
+      (swiper.isHorizontal() ? slides[i].offsetLeft : slides[i].offsetTop)
+      - minusOffset
+      - swiper.cssOverflowAdjustment();
   }
 }

src/modules/virtual/virtual.js

@@ -119,7 +119,7 @@ export default function Virtual({ swiper, extendParams, on, emit }) {
     if (previousFrom === from && previousTo === to && !force) {
       if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {
         swiper.slides.forEach((slideEl) => {
-          slideEl.style[offsetProp] = `${offset}px`;
+          slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
         });
       }
       swiper.updateProgress();
@@ -209,7 +209,7 @@ export default function Virtual({ swiper, extendParams, on, emit }) {
       });
     }
     elementChildren(swiper.slidesEl, '.swiper-slide, swiper-slide').forEach((slideEl) => {
-      slideEl.style[offsetProp] = `${offset}px`;
+      slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
     });
     onRendered();
   }