feat(core): cssMode now supports freeMode

nolimits4web · Jun 9, 2023 · abe1ec7 · abe1ec7
1 parent d2f718c
commit abe1ec7
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 12 deletions.
diff --git a/src/core/core.js b/src/core/core.js
@@ -395,19 +395,19 @@ class Swiper {
       swiper.updateSlidesClasses();
     }
     let translated;
-    if (swiper.params.freeMode && swiper.params.freeMode.enabled) {
+    if (params.freeMode && params.freeMode.enabled && !params.cssMode) {
       setTranslate();
-      if (swiper.params.autoHeight) {
+      if (params.autoHeight) {
         swiper.updateAutoHeight();
       }
     } else {
       if (
-        (swiper.params.slidesPerView === 'auto' || swiper.params.slidesPerView > 1) &&
+        (params.slidesPerView === 'auto' || params.slidesPerView > 1) &&
         swiper.isEnd &&
-        !swiper.params.centeredSlides
+        !params.centeredSlides
       ) {
         const slides =
-          swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides : swiper.slides;
+          swiper.virtual && params.virtual.enabled ? swiper.virtual.slides : swiper.slides;
         translated = swiper.slideTo(slides.length - 1, 0, false, true);
       } else {
         translated = swiper.slideTo(swiper.activeIndex, 0, false, true);

diff --git a/src/core/core.less b/src/core/core.less
@@ -136,6 +136,14 @@ swiper-slide {
     scroll-snap-type: y mandatory;
   }
 }
+.swiper-css-mode.swiper-free-mode {
+  > .swiper-wrapper {
+    scroll-snap-type: none;
+  }
+  > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: none;
+  }
+}
 .swiper-centered {
   > .swiper-wrapper::before {
     content: '';

diff --git a/src/core/core.scss b/src/core/core.scss
@@ -138,6 +138,14 @@ swiper-slide {
     scroll-snap-type: y mandatory;
   }
 }
+.swiper-css-mode.swiper-free-mode {
+  > .swiper-wrapper {
+    scroll-snap-type: none;
+  }
+  > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: none;
+  }
+}
 .swiper-centered {
   > .swiper-wrapper::before {
     content: '';

diff --git a/src/core/events/onTouchEnd.js b/src/core/events/onTouchEnd.js
@@ -89,7 +89,7 @@ export default function onTouchEnd(event) {
     return;
   }
 
-  if (swiper.params.freeMode && params.freeMode.enabled) {
+  if (params.freeMode && params.freeMode.enabled) {
     swiper.freeMode.onTouchEnd({ currentPos });
     return;
   }
@@ -119,7 +119,7 @@ export default function onTouchEnd(event) {
   if (params.rewind) {
     if (swiper.isBeginning) {
       rewindLastIndex =
-        swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual
+        params.virtual && params.virtual.enabled && swiper.virtual
           ? swiper.virtual.slides.length - 1
           : swiper.slides.length - 1;
     } else if (swiper.isEnd) {

diff --git a/src/core/events/onTouchMove.js b/src/core/events/onTouchMove.js
@@ -288,8 +288,6 @@ export default function onTouchMove(event) {
   ) {
     swiper.updateActiveIndex();
     swiper.updateSlidesClasses();
-  }
-  if (swiper.params.freeMode && params.freeMode.enabled && swiper.freeMode) {
     swiper.freeMode.onTouchMove();
   }
   // Update progress

diff --git a/src/core/events/onTouchStart.js b/src/core/events/onTouchStart.js
@@ -130,8 +130,8 @@ export default function onTouchStart(event) {
     e.preventDefault();
   }
   if (
-    swiper.params.freeMode &&
-    swiper.params.freeMode.enabled &&
+    params.freeMode &&
+    params.freeMode.enabled &&
     swiper.freeMode &&
     swiper.animating &&
     !params.cssMode

diff --git a/src/modules/free-mode/free-mode.js b/src/modules/free-mode/free-mode.js
@@ -15,6 +15,7 @@ export default function freeMode({ swiper, extendParams, emit, once }) {
   });
 
   function onTouchStart() {
+    if (swiper.params.cssMode) return;
     const translate = swiper.getTranslate();
     swiper.setTranslate(translate);
     swiper.setTransition(0);
@@ -23,6 +24,7 @@ export default function freeMode({ swiper, extendParams, emit, once }) {
   }
 
   function onTouchMove() {
+    if (swiper.params.cssMode) return;
     const { touchEventsData: data, touches } = swiper;
     // Velocity
     if (data.velocities.length === 0) {
@@ -38,6 +40,7 @@ export default function freeMode({ swiper, extendParams, emit, once }) {
   }
 
   function onTouchEnd({ currentPos }) {
+    if (swiper.params.cssMode) return;
     const { params, wrapperEl, rtlTranslate: rtl, snapGrid, touchEventsData: data } = swiper;
     // Time diff
     const touchEndTime = now();

diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
@@ -263,7 +263,6 @@ export interface SwiperOptions {
    * - `resistance` doesn't have any effect
    * - `allowSlidePrev/Next`
    * - `swipeHandler`
-   * - `freeMode` and all relevant features
    *
    * In case if you use it with other effects, especially 3D effects, it is required to wrap slide's content with `<div class="swiper-slide-transform">` element. And if you use any custom styles on slides (like background colors, border radius, border, etc.), they should be set on `swiper-slide-transform` element instead.
    *