feat(zoom): support Zoom in CSS Mode

nolimits4web · Aug 6, 2021 · 4639702 · 4639702
1 parent 3503ced
commit 4639702
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/modules/zoom/zoom.js b/src/modules/zoom/zoom.js
@@ -351,6 +351,10 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
       gesture.$imageWrapEl.length === 0
     )
       return;
+    if (swiper.params.cssMode) {
+      swiper.wrapperEl.style.overflow = 'hidden';
+      swiper.wrapperEl.style.touchAction = 'none';
+    }
 
     gesture.$slideEl.addClass(`${params.zoomedSlideClass}`);
 
@@ -446,7 +450,10 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
       gesture.$imageWrapEl.length === 0
     )
       return;
-
+    if (swiper.params.cssMode) {
+      swiper.wrapperEl.style.overflow = '';
+      swiper.wrapperEl.style.touchAction = '';
+    }
     zoom.scale = 1;
     currentScale = 1;
     gesture.$imageWrapEl.transition(300).transform('translate3d(0,0,0)');

diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
@@ -237,7 +237,6 @@ export interface SwiperOptions {
    * This is what is not supported when it is enabled:
    *
    * - Some effects (Fade, Flip, Cube)
-   * - Zoom
    * - `speed` parameter may not have no effect
    * - All transition start/end related events (use `slideChange` instead)
    * - `slidesPerGroup` has limited support