Ability to change direction

Fixes nolimits4web#2982
hexitex · Feb 22, 2019 · e487d5e · e487d5e
1 parent 973cc8b
commit e487d5e
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/src/components/core/breakpoints/setBreakpoint.js b/src/components/core/breakpoints/setBreakpoint.js
@@ -28,7 +28,12 @@ export default function () {
     }
 
     const breakpointParams = breakpointOnlyParams || swiper.originalParams;
-    const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView);
+    const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;
+    const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
+
+    if (directionChanged && initialized) {
+      swiper.changeDirection();
+    }
 
     Utils.extend(swiper.params, breakpointParams);
 
@@ -46,6 +51,7 @@ export default function () {
       swiper.updateSlides();
       swiper.slideTo((activeIndex - loopedSlides) + swiper.loopedSlides, 0, false);
     }
+
     swiper.emit('breakpoint', breakpointParams);
   }
 }
diff --git a/src/components/core/core-class.js b/src/components/core/core-class.js
@@ -1,6 +1,8 @@
+/* eslint no-param-reassign: "off" */
 import $ from '../../utils/dom';
 import Utils from '../../utils/utils';
 import Support from '../../utils/support';
+import Browser from '../../utils/browser';
 
 import SwiperClass from '../../utils/class';
 
@@ -316,6 +318,52 @@ class Swiper extends SwiperClass {
     swiper.emit('update');
   }
 
+  changeDirection(newDirection, needUpdate = true) {
+    const swiper = this;
+    const currentDirection = swiper.params.direction;
+    if (!newDirection) {
+      // eslint-disable-next-line
+      newDirection = currentDirection === 'horizontal' ? 'vertical' : 'horizontal';
+    }
+    if ((newDirection === currentDirection) || (newDirection !== 'horizontal' && newDirection !== 'vertical')) {
+      return swiper;
+    }
+
+    if (currentDirection === 'vertical') {
+      swiper.$el
+        .removeClass(`${swiper.params.containerModifierClass}vertical wp8-vertical`)
+        .addClass(`${swiper.params.containerModifierClass}${newDirection}`);
+
+      if ((Browser.isIE || Browser.isEdge) && (Support.pointerEvents || Support.prefixedPointerEvents)) {
+        swiper.$el.addClass(`${swiper.params.containerModifierClass}wp8-${newDirection}`);
+      }
+    }
+    if (currentDirection === 'horizontal') {
+      swiper.$el
+        .removeClass(`${swiper.params.containerModifierClass}horizontal wp8-horizontal`)
+        .addClass(`${swiper.params.containerModifierClass}${newDirection}`);
+
+      if ((Browser.isIE || Browser.isEdge) && (Support.pointerEvents || Support.prefixedPointerEvents)) {
+        swiper.$el.addClass(`${swiper.params.containerModifierClass}wp8-${newDirection}`);
+      }
+    }
+
+    swiper.params.direction = newDirection;
+
+    swiper.slides.each((slideIndex, slideEl) => {
+      if (newDirection === 'vertical') {
+        slideEl.style.width = '';
+      } else {
+        slideEl.style.height = '';
+      }
+    });
+
+    swiper.emit('changeDirection');
+    if (needUpdate) swiper.update();
+
+    return swiper;
+  }
+
   init() {
     const swiper = this;
     if (swiper.initialized) return;