feat(core): support for Virtual Slides in CSS Mode

nolimits4web · Aug 6, 2021 · 0e26d52 · 0e26d52
1 parent f40a370
commit 0e26d52
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 2 deletions.
diff --git a/src/core/slide/slideTo.js b/src/core/slide/slideTo.js
@@ -143,7 +143,16 @@ export default function slideTo(
       t = wrapperEl.scrollWidth - wrapperEl.offsetWidth - t;
     }
     if (speed === 0) {
+      const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
+      if (isVirtual) {
+        swiper.wrapperEl.style.scrollSnapType = 'none';
+      }
       wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;
+      if (isVirtual) {
+        requestAnimationFrame(() => {
+          swiper.wrapperEl.style.scrollSnapType = '';
+        });
+      }
     } else {
       if (!swiper.support.smoothScroll) {
         animateCSSModeScroll({ swiper, targetPosition: t, side: isH ? 'left' : 'top' });

diff --git a/src/modules/virtual/virtual.js b/src/modules/virtual/virtual.js
@@ -16,8 +16,8 @@ export default function Virtual({ swiper, extendParams, on }) {
 
   swiper.virtual = {
     cache: {},
-    from: null,
-    to: null,
+    from: undefined,
+    to: undefined,
     slides: [],
     offset: 0,
     slidesGrid: [],
@@ -232,6 +232,11 @@ export default function Virtual({ swiper, extendParams, on }) {
     if (!swiper.params.virtual.enabled) return;
     update();
   });
+  on('init update resize', () => {
+    if (swiper.params.cssMode) {
+      swiper.wrapperEl.style.setProperty('--swiper-virtual-size', `${swiper.virtualSize}px`);
+    }
+  });
 
   Object.assign(swiper.virtual, {
     appendSlide,

diff --git a/src/modules/virtual/virtual.less b/src/modules/virtual/virtual.less
@@ -0,0 +1,17 @@
+.swiper-container-virtual.swiper-container-css-mode {
+  .swiper-wrapper::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+  }
+  &.swiper-container-horizontal .swiper-wrapper::after {
+    height: 1px;
+    width: var(--swiper-virtual-size);
+  }
+  &.swiper-container-vertical .swiper-wrapper::after {
+    width: 1px;
+    height: var(--swiper-virtual-size);
+  }
+}
diff --git a/src/modules/virtual/virtual.scss b/src/modules/virtual/virtual.scss
@@ -0,0 +1,17 @@
+.swiper-container-virtual.swiper-container-css-mode {
+  .swiper-wrapper::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+  }
+  &.swiper-container-horizontal .swiper-wrapper::after {
+    height: 1px;
+    width: var(--swiper-virtual-size);
+  }
+  &.swiper-container-vertical .swiper-wrapper::after {
+    width: 1px;
+    height: var(--swiper-virtual-size);
+  }
+}