feat(core): support for centeredSlides in CSS Mode

nolimits4web · Aug 6, 2021 · c940953 · c940953
1 parent 8300225
commit c940953
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 6 deletions.
diff --git a/src/core/classes/addClasses.js b/src/core/classes/addClasses.js
@@ -30,6 +30,7 @@ export default function addClasses() {
     { 'android': device.android },
     { 'ios': device.ios },
     { 'css-mode': params.cssMode },
+    { 'centered': params.cssMode && params.centeredSlides },
   ], params.containerModifierClass);
   classNames.push(...suffixes);
   $el.addClass([...classNames].join(' '));

diff --git a/src/core/core.less b/src/core/core.less
@@ -119,3 +119,32 @@
     scroll-snap-type: y mandatory;
   }
 }
+.swiper-container-centered {
+  > .swiper-wrapper::before {
+    content: '';
+    flex-shrink: 0;
+    order: 9999;
+  }
+  &.swiper-container-horizontal {
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-inline-start: var(--swiper-centered-offset-before);
+    }
+    > .swiper-wrapper::before {
+      height: 100%;
+      width: var(--swiper-centered-offset-after);
+    }
+  }
+  &.swiper-container-vertical {
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-block-start: var(--swiper-centered-offset-before);
+    }
+    > .swiper-wrapper::before {
+      width: 100%;
+      height: var(--swiper-centered-offset-after);
+    }
+  }
+
+  > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: center center;
+  }
+}
diff --git a/src/core/core.scss b/src/core/core.scss
@@ -121,3 +121,32 @@
     scroll-snap-type: y mandatory;
   }
 }
+.swiper-container-centered {
+  > .swiper-wrapper::before {
+    content: '';
+    flex-shrink: 0;
+    order: 9999;
+  }
+  &.swiper-container-horizontal {
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-inline-start: var(--swiper-centered-offset-before);
+    }
+    > .swiper-wrapper::before {
+      height: 100%;
+      width: var(--swiper-centered-offset-after);
+    }
+  }
+  &.swiper-container-vertical {
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-block-start: var(--swiper-centered-offset-before);
+    }
+    > .swiper-wrapper::before {
+      width: 100%;
+      height: var(--swiper-centered-offset-after);
+    }
+  }
+
+  > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: center center;
+  }
+}
diff --git a/src/core/update/updateSlides.js b/src/core/update/updateSlides.js
@@ -1,3 +1,5 @@
+import { setCSSProperty } from '../../shared/utils.js';
+
 export default function updateSlides() {
   const swiper = this;
   function getDirectionLabel(property) {
@@ -61,6 +63,12 @@ export default function updateSlides() {
   if (rtl) slides.css({ marginLeft: '', marginBottom: '', marginTop: '' });
   else slides.css({ marginRight: '', marginBottom: '', marginTop: '' });
 
+  // reset cssMode offsets
+  if (params.centeredSlides && params.cssMode) {
+    setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', '');
+    setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-after', '');
+  }
+
   const gridEnabled = params.grid && params.grid.rows > 1 && swiper.grid;
   if (gridEnabled) {
     swiper.grid.initSlides(slidesLength);
@@ -244,6 +252,19 @@ export default function updateSlides() {
     slidesSizesGrid,
   });
 
+  if (params.centeredSlides && params.cssMode && !params.centeredSlidesBounds) {
+    setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', `${-snapGrid[0]}px`);
+    setCSSProperty(
+      swiper.wrapperEl,
+      '--swiper-centered-offset-after',
+      `${swiper.size / 2 - slidesSizesGrid[slidesSizesGrid.length - 1] / 2}px`,
+    );
+    const addToSnapGrid = -swiper.snapGrid[0];
+    const addToSlidesGrid = -swiper.slidesGrid[0];
+    swiper.snapGrid = swiper.snapGrid.map((v) => v + addToSnapGrid);
+    swiper.slidesGrid = swiper.slidesGrid.map((v) => v + addToSlidesGrid);
+  }
+
   if (slidesLength !== previousSlidesLength) {
     swiper.emit('slidesLengthChange');
   }

diff --git a/src/modules/virtual/virtual.js b/src/modules/virtual/virtual.js
@@ -1,4 +1,5 @@
 import $ from '../../shared/dom.js';
+import { setCSSProperty } from '../../shared/utils.js';
 
 export default function Virtual({ swiper, extendParams, on }) {
   extendParams({
@@ -235,7 +236,7 @@ export default function Virtual({ swiper, extendParams, on }) {
   on('init update resize', () => {
     if (!swiper.params.virtual.enabled) return;
     if (swiper.params.cssMode) {
-      swiper.wrapperEl.style.setProperty('--swiper-virtual-size', `${swiper.virtualSize}px`);
+      setCSSProperty(swiper.wrapperEl, '--swiper-virtual-size', `${swiper.virtualSize}px`);
     }
   });
 

diff --git a/src/shared/utils.js b/src/shared/utils.js
@@ -156,6 +156,10 @@ function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
   return params;
 }
 
+function setCSSProperty(el, varName, varValue) {
+  el.style.setProperty(varName, varValue);
+}
+
 function animateCSSModeScroll({ swiper, targetPosition, side }) {
   const window = getWindow();
   const startPosition = -swiper.translate;
@@ -207,4 +211,5 @@ export {
   getComputedStyle,
   classesToSelector,
   createElementIfNotDefined,
+  setCSSProperty,
 };
diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
@@ -236,14 +236,11 @@ export interface SwiperOptions {
    *
    * This is what is not supported when it is enabled:
    *
-   * - All effects (Fade, Coverflow, Flip, Cube)
+   * - Some effects (Fade, Flip, Cube)
    * - Zoom
-   * - Virtual Slides
-   * - `speed` parameter will have no effect
+   * - `speed` parameter may not have no effect
    * - All transition start/end related events (use `slideChange` instead)
    * - `slidesPerGroup` has limited support
-   * - `centeredSlides` is not supported
-   * - Changing slides with anything except touch/swipe and mousewheel will happen without transition in browsers without `scrollTo.behaviour = 'smooth'` support (e.g. in desktop and iOS Safari)
    * - `simulateTouch` doesn't have effect and "dragging" with mouse doesn't work
    * - `resistance` doesn't have any effect
    * - `allowSlidePrev/Next`