@gem-sdk/swiper 0.0.15-dev.1 → 0.0.15

package/swiper-element.js

@@ -1,5 +1,5 @@
 /**
- * Swiper Custom Element 0.0.15-dev.1
+ * Swiper Custom Element 0.0.15
  * Gem SDK - Swiper, Customized of swiper
  * https://swiperjs.com
  *
@@ -841,6 +841,9 @@
 
   function updateSlides() {
     const swiper = this;
+    function getDirectionPropertyValue(node, label) {
+      return parseFloat(node.getPropertyValue(swiper.getDirectionLabel(label)) || 0);
+    }
     const params = swiper.params;
     const {
       wrapperEl,
@@ -849,8 +852,10 @@
       rtlTranslate: rtl,
       wrongRTL
     } = swiper;
+    const isVirtual = swiper.virtual && params.virtual.enabled;
+    const previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length;
     const slides = elementChildren(slidesEl, `.${swiper.params.slideClass}, swiper-slide`);
-    const slidesLength = slides.length;
+    const slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length;
     let snapGrid = [];
     const slidesGrid = [];
     const slidesSizesGrid = [];
@@ -868,15 +873,15 @@
     let slidePosition = -offsetBefore;
     let prevSlideSize = 0;
     let index = 0;
-    if (typeof swiperSize === 'undefined') return;
+    if (typeof swiperSize === 'undefined') {
+      return;
+    }
     if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
       spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiperSize;
     } else if (typeof spaceBetween === 'string') {
       spaceBetween = parseFloat(spaceBetween);
     }
-
-    // core-lite: compute total slides size without optional modules
-    swiper.slidesTotalSize = -spaceBetween;
+    swiper.virtualSize = -spaceBetween;
 
     // reset margins
     slides.forEach(slideEl => {
@@ -894,34 +899,49 @@
       setCSSProperty(wrapperEl, '--swiper-centered-offset-before', '');
       setCSSProperty(wrapperEl, '--swiper-centered-offset-after', '');
     }
+    const gridEnabled = params.grid && params.grid.rows > 1 && swiper.grid;
+    if (gridEnabled) {
+      swiper.grid.initSlides(slides);
+    } else if (swiper.grid) {
+      swiper.grid.unsetSlides();
+    }
 
     // Calc slides
     let slideSize;
-    const shouldResetSlideSize = params.slidesPerView === 'auto' && params.breakpoints && Object.keys(params.breakpoints).filter(key => typeof params.breakpoints[key].slidesPerView !== 'undefined').length > 0;
+    const shouldResetSlideSize = params.slidesPerView === 'auto' && params.breakpoints && Object.keys(params.breakpoints).filter(key => {
+      return typeof params.breakpoints[key].slidesPerView !== 'undefined';
+    }).length > 0;
     for (let i = 0; i < slidesLength; i += 1) {
       slideSize = 0;
       let slide;
       if (slides[i]) slide = slides[i];
+      if (gridEnabled) {
+        swiper.grid.updateSlide(i, slide, slides);
+      }
       if (slides[i] && elementStyle(slide, 'display') === 'none') continue; // eslint-disable-line
 
       if (params.slidesPerView === 'auto') {
-        if (shouldResetSlideSize && slides[i]) {
+        if (shouldResetSlideSize) {
           slides[i].style[swiper.getDirectionLabel('width')] = ``;
         }
         const slideStyles = getComputedStyle(slide);
         const currentTransform = slide.style.transform;
         const currentWebKitTransform = slide.style.webkitTransform;
-        if (currentTransform) slide.style.transform = 'none';
-        if (currentWebKitTransform) slide.style.webkitTransform = 'none';
+        if (currentTransform) {
+          slide.style.transform = 'none';
+        }
+        if (currentWebKitTransform) {
+          slide.style.webkitTransform = 'none';
+        }
         if (params.roundLengths) {
           slideSize = swiper.isHorizontal() ? elementOuterSize(slide, 'width', true) : elementOuterSize(slide, 'height', true);
         } else {
           // eslint-disable-next-line
-          const width = parseFloat(slideStyles.getPropertyValue('width')) || slide.offsetWidth;
-          const paddingLeft = parseFloat(slideStyles.getPropertyValue('padding-left')) || 0;
-          const paddingRight = parseFloat(slideStyles.getPropertyValue('padding-right')) || 0;
-          const marginLeft = parseFloat(slideStyles.getPropertyValue('margin-left')) || 0;
-          const marginRight = parseFloat(slideStyles.getPropertyValue('margin-right')) || 0;
+          const width = getDirectionPropertyValue(slideStyles, 'width');
+          const paddingLeft = getDirectionPropertyValue(slideStyles, 'padding-left');
+          const paddingRight = getDirectionPropertyValue(slideStyles, 'padding-right');
+          const marginLeft = getDirectionPropertyValue(slideStyles, 'margin-left');
+          const marginRight = getDirectionPropertyValue(slideStyles, 'margin-right');
           const boxSizing = slideStyles.getPropertyValue('box-sizing');
           if (boxSizing && boxSizing === 'border-box') {
             slideSize = width + marginLeft + marginRight;
@@ -933,8 +953,12 @@
             slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight + (offsetWidth - clientWidth);
           }
         }
-        if (currentTransform) slide.style.transform = currentTransform;
-        if (currentWebKitTransform) slide.style.webkitTransform = currentWebKitTransform;
+        if (currentTransform) {
+          slide.style.transform = currentTransform;
+        }
+        if (currentWebKitTransform) {
+          slide.style.webkitTransform = currentWebKitTransform;
+        }
         if (params.roundLengths) slideSize = Math.floor(slideSize);
       } else {
         slideSize = (swiperSize - (params.slidesPerView - 1) * spaceBetween) / params.slidesPerView;
@@ -943,13 +967,13 @@
           slides[i].style[swiper.getDirectionLabel('width')] = `${slideSize}px`;
         }
       }
-      if (slides[i]) slides[i].swiperSlideSize = slideSize;
+      if (slides[i]) {
+        slides[i].swiperSlideSize = slideSize;
+      }
       slidesSizesGrid.push(slideSize);
       if (params.centeredSlides) {
         slidePosition = slidePosition + slideSize / 2 + prevSlideSize / 2 + spaceBetween;
-        if (prevSlideSize === 0 && i !== 0) {
-          slidePosition = slidePosition - swiperSize / 2 - spaceBetween;
-        }
+        if (prevSlideSize === 0 && i !== 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween;
         if (i === 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween;
         if (Math.abs(slidePosition) < 1 / 1000) slidePosition = 0;
         if (params.roundLengths) slidePosition = Math.floor(slidePosition);
@@ -957,37 +981,55 @@
         slidesGrid.push(slidePosition);
       } else {
         if (params.roundLengths) slidePosition = Math.floor(slidePosition);
-        if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params.slidesPerGroup === 0) {
-          snapGrid.push(slidePosition);
-        }
+        if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params.slidesPerGroup === 0) snapGrid.push(slidePosition);
         slidesGrid.push(slidePosition);
         slidePosition = slidePosition + slideSize + spaceBetween;
       }
-      swiper.slidesTotalSize += slideSize + spaceBetween;
+      swiper.virtualSize += slideSize + spaceBetween;
       prevSlideSize = slideSize;
       index += 1;
     }
-    swiper.slidesTotalSize = Math.max(swiper.slidesTotalSize, swiperSize) + offsetAfter;
-    if (rtl && wrongRTL && params.effect === 'slide') {
-      wrapperEl.style.width = `${swiper.slidesTotalSize + spaceBetween}px`;
+    swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;
+    if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
+      wrapperEl.style.width = `${swiper.virtualSize + spaceBetween}px`;
     }
     if (params.setWrapperSize) {
-      wrapperEl.style[swiper.getDirectionLabel('width')] = `${swiper.slidesTotalSize + spaceBetween}px`;
+      wrapperEl.style[swiper.getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`;
+    }
+    if (gridEnabled) {
+      swiper.grid.updateWrapperSize(slideSize, snapGrid);
     }
 
-    // Remove last snap points depending on width (non-centered)
+    // Remove last grid elements depending on width
     if (!params.centeredSlides) {
       const newSlidesGrid = [];
       for (let i = 0; i < snapGrid.length; i += 1) {
         let slidesGridItem = snapGrid[i];
         if (params.roundLengths) slidesGridItem = Math.floor(slidesGridItem);
-        if (snapGrid[i] <= swiper.slidesTotalSize - swiperSize) {
+        if (snapGrid[i] <= swiper.virtualSize - swiperSize) {
           newSlidesGrid.push(slidesGridItem);
         }
       }
       snapGrid = newSlidesGrid;
-      if (Math.floor(swiper.slidesTotalSize - swiperSize) - Math.floor(snapGrid[snapGrid.length - 1]) > 1) {
-        snapGrid.push(swiper.slidesTotalSize - swiperSize);
+      if (Math.floor(swiper.virtualSize - swiperSize) - Math.floor(snapGrid[snapGrid.length - 1]) > 1) {
+        snapGrid.push(swiper.virtualSize - swiperSize);
+      }
+    }
+    if (isVirtual && params.loop) {
+      const size = slidesSizesGrid[0] + spaceBetween;
+      if (params.slidesPerGroup > 1) {
+        const groups = Math.ceil((swiper.virtual.slidesBefore + swiper.virtual.slidesAfter) / params.slidesPerGroup);
+        const groupSize = size * params.slidesPerGroup;
+        for (let i = 0; i < groups; i += 1) {
+          snapGrid.push(snapGrid[snapGrid.length - 1] + groupSize);
+        }
+      }
+      for (let i = 0; i < swiper.virtual.slidesBefore + swiper.virtual.slidesAfter; i += 1) {
+        if (params.slidesPerGroup === 1) {
+          snapGrid.push(snapGrid[snapGrid.length - 1] + size);
+        }
+        slidesGrid.push(slidesGrid[slidesGrid.length - 1] + size);
+        swiper.virtualSize += size;
       }
     }
     if (snapGrid.length === 0) snapGrid = [0];
@@ -995,7 +1037,9 @@
       const key = swiper.isHorizontal() && rtl ? 'marginLeft' : swiper.getDirectionLabel('marginRight');
       slides.filter((_, slideIndex) => {
         if (!params.cssMode || params.loop) return true;
-        if (slideIndex === slides.length - 1) return false;
+        if (slideIndex === slides.length - 1) {
+          return false;
+        }
         return true;
       }).forEach(slideEl => {
         slideEl.style[key] = `${spaceBetween}px`;
@@ -1045,9 +1089,7 @@
       swiper.snapGrid = swiper.snapGrid.map(v => v + addToSnapGrid);
       swiper.slidesGrid = swiper.slidesGrid.map(v => v + addToSlidesGrid);
     }
-
-    // Emit changes
-    if (slidesLength !== (previousSlidesGridLength ? slides.length : slides.length)) {
+    if (slidesLength !== previousSlidesLength) {
       swiper.emit('slidesLengthChange');
     }
     if (snapGrid.length !== previousSnapGridLength) {
@@ -1061,7 +1103,7 @@
       swiper.updateSlidesOffset();
     }
     swiper.emit('slidesUpdated');
-    if (!params.cssMode && params.effect === 'slide') {
+    if (!isVirtual && !params.cssMode && (params.effect === 'slide' || params.effect === 'fade')) {
       const backFaceHiddenClass = `${params.containerModifierClass}backface-hidden`;
       const hasClassBackfaceClassAdded = swiper.el.classList.contains(backFaceHiddenClass);
       if (slidesLength <= params.maxBackfaceHiddenSlides) {
@@ -1075,13 +1117,20 @@
   function updateAutoHeight(speed) {
     const swiper = this;
     const activeSlides = [];
+    const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
+    let newHeight = 0;
+    let i;
     if (typeof speed === 'number') {
       swiper.setTransition(speed);
     } else if (speed === true) {
       swiper.setTransition(swiper.params.speed);
     }
-    const getSlideByIndex = index => swiper.slides[index];
-
+    const getSlideByIndex = index => {
+      if (isVirtual) {
+        return swiper.slides[swiper.getSlideIndexByData(index)];
+      }
+      return swiper.slides[index];
+    };
     // Find slides currently in view
     if (swiper.params.slidesPerView !== 'auto' && swiper.params.slidesPerView > 1) {
       if (swiper.params.centeredSlides) {
@@ -1089,9 +1138,9 @@
           activeSlides.push(slide);
         });
       } else {
-        for (let i = 0; i < Math.ceil(swiper.params.slidesPerView); i += 1) {
+        for (i = 0; i < Math.ceil(swiper.params.slidesPerView); i += 1) {
           const index = swiper.activeIndex + i;
-          if (index > swiper.slides.length) break;
+          if (index > swiper.slides.length && !isVirtual) break;
           activeSlides.push(getSlideByIndex(index));
         }
       }
@@ -1100,13 +1149,14 @@
     }
 
     // Find new height from highest slide in view
-    let newHeight = 0;
-    for (let i = 0; i < activeSlides.length; i += 1) {
+    for (i = 0; i < activeSlides.length; i += 1) {
       if (typeof activeSlides[i] !== 'undefined') {
         const height = activeSlides[i].offsetHeight;
         newHeight = height > newHeight ? height : newHeight;
       }
     }
+
+    // Update Height
     if (newHeight || newHeight === 0) swiper.wrapperEl.style.height = `${newHeight}px`;
   }
 
@@ -1251,16 +1301,46 @@
       slidesEl,
       activeIndex
     } = swiper;
-    const getNextSlide = slideEl => elementNextAll(slideEl, `.${params.slideClass}, swiper-slide`)[0];
-    const getPrevSlide = slideEl => elementPrevAll(slideEl, `.${params.slideClass}, swiper-slide`)[0];
-    const activeSlide = slides[activeIndex];
-    let nextSlide;
+    const isVirtual = swiper.virtual && params.virtual.enabled;
+    const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;
+    const getFilteredSlide = selector => {
+      return elementChildren(slidesEl, `.${params.slideClass}${selector}, swiper-slide${selector}`)[0];
+    };
+    let activeSlide;
     let prevSlide;
+    let nextSlide;
+    if (isVirtual) {
+      if (params.loop) {
+        let slideIndex = activeIndex - swiper.virtual.slidesBefore;
+        if (slideIndex < 0) slideIndex = swiper.virtual.slides.length + slideIndex;
+        if (slideIndex >= swiper.virtual.slides.length) slideIndex -= swiper.virtual.slides.length;
+        activeSlide = getFilteredSlide(`[data-swiper-slide-index="${slideIndex}"]`);
+      } else {
+        activeSlide = getFilteredSlide(`[data-swiper-slide-index="${activeIndex}"]`);
+      }
+    } else {
+      if (gridEnabled) {
+        activeSlide = slides.find(slideEl => slideEl.column === activeIndex);
+        nextSlide = slides.find(slideEl => slideEl.column === activeIndex + 1);
+        prevSlide = slides.find(slideEl => slideEl.column === activeIndex - 1);
+      } else {
+        activeSlide = slides[activeIndex];
+      }
+    }
     if (activeSlide) {
-      nextSlide = getNextSlide(activeSlide);
-      prevSlide = getPrevSlide(activeSlide);
-      if (params.loop && !nextSlide) nextSlide = slides[0];
-      if (params.loop && !prevSlide) prevSlide = slides[slides.length - 1];
+      if (!gridEnabled) {
+        // Next Slide
+        nextSlide = elementNextAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
+        if (params.loop && !nextSlide) {
+          nextSlide = slides[0];
+        }
+
+        // Prev Slide
+        prevSlide = elementPrevAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
+        if (params.loop && !prevSlide === 0) {
+          prevSlide = slides[slides.length - 1];
+        }
+      }
     }
     slides.forEach(slideEl => {
       toggleSlideClasses(slideEl, slideEl === activeSlide, params.slideActiveClass);
@@ -1351,6 +1431,7 @@
         activeIndex = i;
       }
     }
+    // Normalize slideIndex
     if (params.normalizeSlideIndex) {
       if (activeIndex < 0 || typeof activeIndex === 'undefined') activeIndex = 0;
     }
@@ -1368,6 +1449,16 @@
     } = swiper;
     let activeIndex = newActiveIndex;
     let snapIndex;
+    const getVirtualRealIndex = aIndex => {
+      let realIndex = aIndex - swiper.virtual.slidesBefore;
+      if (realIndex < 0) {
+        realIndex = swiper.virtual.slides.length + realIndex;
+      }
+      if (realIndex >= swiper.virtual.slides.length) {
+        realIndex -= swiper.virtual.slides.length;
+      }
+      return realIndex;
+    };
     if (typeof activeIndex === 'undefined') {
       activeIndex = getActiveIndexByTranslate(swiper);
     }
@@ -1385,12 +1476,32 @@
       }
       return;
     }
-    let realIndex = activeIndex;
-    if (swiper.slides[activeIndex]) {
+    if (activeIndex === previousIndex && swiper.params.loop && swiper.virtual && swiper.params.virtual.enabled) {
+      swiper.realIndex = getVirtualRealIndex(activeIndex);
+      return;
+    }
+    const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;
+
+    // Get real index
+    let realIndex;
+    if (swiper.virtual && params.virtual.enabled && params.loop) {
+      realIndex = getVirtualRealIndex(activeIndex);
+    } else if (gridEnabled) {
+      const firstSlideInColumn = swiper.slides.find(slideEl => slideEl.column === activeIndex);
+      let activeSlideIndex = parseInt(firstSlideInColumn.getAttribute('data-swiper-slide-index'), 10);
+      if (Number.isNaN(activeSlideIndex)) {
+        activeSlideIndex = Math.max(swiper.slides.indexOf(firstSlideInColumn), 0);
+      }
+      realIndex = Math.floor(activeSlideIndex / params.grid.rows);
+    } else if (swiper.slides[activeIndex]) {
       const slideIndex = swiper.slides[activeIndex].getAttribute('data-swiper-slide-index');
       if (slideIndex) {
         realIndex = parseInt(slideIndex, 10);
+      } else {
+        realIndex = activeIndex;
       }
+    } else {
+      realIndex = activeIndex;
     }
     Object.assign(swiper, {
       previousSnapIndex,
@@ -1437,7 +1548,11 @@
     }
     if (slide && slideFound) {
       swiper.clickedSlide = slide;
-      swiper.clickedIndex = slideIndex;
+      if (swiper.virtual && swiper.params.virtual.enabled) {
+        swiper.clickedIndex = parseInt(slide.getAttribute('data-swiper-slide-index'), 10);
+      } else {
+        swiper.clickedIndex = slideIndex;
+      }
     } else {
       swiper.clickedSlide = undefined;
       swiper.clickedIndex = undefined;
@@ -1471,6 +1586,9 @@
       translate,
       wrapperEl
     } = swiper;
+    if (params.virtualTranslate) {
+      return rtl ? -translate : translate;
+    }
     if (params.cssMode) {
       return translate;
     }
@@ -1504,7 +1622,7 @@
     swiper.translate = swiper.isHorizontal() ? x : y;
     if (params.cssMode) {
       wrapperEl[swiper.isHorizontal() ? 'scrollLeft' : 'scrollTop'] = swiper.isHorizontal() ? -x : -y;
-    } else {
+    } else if (!params.virtualTranslate) {
       if (swiper.isHorizontal()) {
         x -= swiper.cssOverflowAdjustment();
       } else {
@@ -1741,6 +1859,7 @@
     let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup);
     if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
     const translate = -snapGrid[snapIndex];
+    // Normalize slideIndex
     if (params.normalizeSlideIndex) {
       for (let i = 0; i < slidesGrid.length; i += 1) {
         const normalizedTranslate = -Math.floor(translate * 100);
@@ -1757,24 +1876,33 @@
         }
       }
     }
-
     // Directions locks
     if (swiper.initialized && slideIndex !== activeIndex) {
       if (!swiper.allowSlideNext && (rtl ? translate > swiper.translate && translate > swiper.minTranslate() : translate < swiper.translate && translate < swiper.minTranslate())) {
         return false;
       }
       if (!swiper.allowSlidePrev && translate > swiper.translate && translate > swiper.maxTranslate()) {
-        if ((activeIndex || 0) !== slideIndex) return false;
+        if ((activeIndex || 0) !== slideIndex) {
+          return false;
+        }
       }
     }
     if (slideIndex !== (previousIndex || 0) && runCallbacks) {
       swiper.emit('beforeSlideChangeStart');
     }
+
+    // Update progress
     swiper.updateProgress(translate);
     let direction;
     if (slideIndex > activeIndex) direction = 'next';else if (slideIndex < activeIndex) direction = 'prev';else direction = 'reset';
-    if (rtl && -translate === swiper.translate || !rtl && translate === swiper.translate) {
+
+    // initial virtual
+    const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
+    const isInitialVirtual = isVirtual && initial;
+    // Update Index
+    if (!isInitialVirtual && (rtl && -translate === swiper.translate || !rtl && translate === swiper.translate)) {
       swiper.updateActiveIndex(slideIndex);
+      // Update Height
       if (params.autoHeight) {
         swiper.updateAutoHeight();
       }
@@ -1792,7 +1920,24 @@
       const isH = swiper.isHorizontal();
       const t = rtl ? translate : -translate;
       if (speed === 0) {
-        wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;
+        if (isVirtual) {
+          swiper.wrapperEl.style.scrollSnapType = 'none';
+          swiper._immediateVirtual = true;
+        }
+        if (isVirtual && !swiper._cssModeVirtualInitialSet && swiper.params.initialSlide > 0) {
+          swiper._cssModeVirtualInitialSet = true;
+          requestAnimationFrame(() => {
+            wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;
+          });
+        } else {
+          wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;
+        }
+        if (isVirtual) {
+          requestAnimationFrame(() => {
+            swiper.wrapperEl.style.scrollSnapType = '';
+            swiper._immediateVirtual = false;
+          });
+        }
       } else {
         if (!swiper.support.smoothScroll) {
           animateCSSModeScroll({
@@ -1810,7 +1955,10 @@
       return true;
     }
     const browser = getBrowser();
-    browser.isSafari;
+    const isSafari = browser.isSafari;
+    if (isVirtual && !initial && isSafari && swiper.isElement) {
+      swiper.virtual.update(false, false, slideIndex);
+    }
     swiper.setTransition(speed);
     swiper.setTranslate(translate);
     swiper.updateActiveIndex(slideIndex);
@@ -1981,6 +2129,8 @@
     if (swiper.params?.isSneakPeekCenter && slides.length > 1 && swiper.activeIndex === 0) {
       const gap = Math.abs(swiper.snapGrid[1] - swiper.snapGrid[0]);
       const swiperTranslate = JSON.parse(JSON.stringify(swiper.snapGrid[1]));
+
+      // Move last item to first position only if active slide is the first slide
       const lastSlide = slides[slides.length - 1];
       lastSlide.swiperLoopMoveDOM = true;
       swiper.slidesEl.prepend(lastSlide);
@@ -2015,8 +2165,11 @@
       perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);
     }
     const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : perGroup;
+    const isVirtual = swiper.virtual && params.virtual.enabled;
     if (params.loop) {
-      if (animating && params.loopPreventsSliding) return false;
+      if (animating && !isVirtual && params.loopPreventsSliding) return false;
+
+      // Kiểm tra xem loop có bị disable không
       const currentSlidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(params.slidesPerView, 10));
       if (swiper.slides.length >= currentSlidesPerView) {
         swiper.loopFix({
@@ -2043,6 +2196,7 @@
         const gap = Math.abs(swiper.snapGrid[lastSnapGridIndex] - swiper.snapGrid[lastSnapGridIndex - 1]);
         const swiperTranslate = structuredClone(swiper.snapGrid[lastSnapGridIndex - 1]);
         if (!swiper.params.loop) return;
+        // Move first item to last position only if active slide is the last slide
         const firstSlide = slides[0];
         firstSlide.swiperLoopMoveDOM = true;
         swiper.slidesEl.append(firstSlide);
@@ -2067,14 +2221,17 @@
       params,
       snapGrid,
       slidesGrid,
-      rtlTranslate: rtlTranslate,
-      enabled
+      rtlTranslate,
+      enabled,
+      animating
     } = swiper;
     if (!enabled || swiper.destroyed) return swiper;
     if (typeof speed === 'undefined') {
       speed = swiper.params.speed;
     }
+    swiper.virtual && params.virtual.enabled;
     if (params.loop) {
+      // Kiểm tra xem loop có bị disable không
       const currentSlidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(params.slidesPerView, 10));
       if (swiper.slides.length >= currentSlidesPerView) {
         swiper.loopFix({
@@ -2091,16 +2248,18 @@
     }
     const normalizedTranslate = normalize(translate);
     const normalizedSnapGrid = snapGrid.map(val => normalize(val));
+    const isFreeMode = params.freeMode && params.freeMode.enabled;
     let prevSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate) - 1];
-    if (typeof prevSnap === 'undefined' && params.cssMode) {
+    if (typeof prevSnap === 'undefined' && (params.cssMode || isFreeMode)) {
       let prevSnapIndex;
       snapGrid.forEach((snap, snapIndex) => {
         if (normalizedTranslate >= snap) {
+          // prevSnap = snap;
           prevSnapIndex = snapIndex;
         }
       });
       if (typeof prevSnapIndex !== 'undefined') {
-        prevSnap = snapGrid[prevSnapIndex > 0 ? prevSnapIndex - 1 : prevSnapIndex];
+        prevSnap = isFreeMode ? snapGrid[prevSnapIndex] : snapGrid[prevSnapIndex > 0 ? prevSnapIndex - 1 : prevSnapIndex];
       }
     }
     let prevIndex = 0;
@@ -2113,7 +2272,7 @@
       }
     }
     if (params.rewind && swiper.isBeginning) {
-      const lastIndex = swiper.slides.length - 1;
+      const lastIndex = swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual ? swiper.virtual.slides.length - 1 : swiper.slides.length - 1;
       return swiper.slideTo(lastIndex, speed, runCallbacks, internal);
     } else if (params.loop && swiper.activeIndex === 0 && params.cssMode) {
       requestAnimationFrame(() => {
@@ -2127,6 +2286,8 @@
       if (swiper.params?.isSneakPeekCenter && slides.length > 1 && swiper.activeIndex === 0) {
         const gap = Math.abs(swiper.snapGrid[1] - swiper.snapGrid[0]);
         const swiperTranslate = JSON.parse(JSON.stringify(swiper.snapGrid[1]));
+
+        // Move last item to first position only if active slide is the first slide
         if (!swiper.params.loop) return;
         const lastSlide = slides[slides.length - 1];
         lastSlide.swiperLoopMoveDOM = true;
@@ -2203,19 +2364,20 @@
       slidesEl
     } = swiper;
     const slidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : params.slidesPerView;
-    const slideToIndex = swiper.clickedIndex;
+    let slideToIndex = swiper.getSlideIndexWhenGrid(swiper.clickedIndex);
     let realIndex;
     const slideSelector = swiper.isElement ? `swiper-slide` : `.${params.slideClass}`;
+    const isGrid = swiper.grid && swiper.params.grid && swiper.params.grid.rows > 1;
     if (params.loop) {
       if (swiper.animating) return;
       realIndex = parseInt(swiper.clickedSlide.getAttribute('data-swiper-slide-index'), 10);
       if (params.centeredSlides) {
         swiper.slideToLoop(realIndex);
-      } else if (slideToIndex > swiper.slides.length - slidesPerView) {
+      } else if (slideToIndex > (isGrid ? (swiper.slides.length - slidesPerView) / 2 - (swiper.params.grid.rows - 1) : swiper.slides.length - slidesPerView)) {
         swiper.loopFix();
-        const clickedEl = elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0];
+        slideToIndex = swiper.getSlideIndex(elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0]);
         nextTick(() => {
-          if (clickedEl) swiper.slideTo(swiper.getSlideIndex(clickedEl));
+          swiper.slideTo(slideToIndex);
         });
       } else {
         swiper.slideTo(slideToIndex);
@@ -2242,7 +2404,7 @@
       params,
       slidesEl
     } = swiper;
-    if (!params.loop) return;
+    if (!params.loop || swiper.virtual && swiper.params.virtual.enabled) return;
     const initSlides = () => {
       const slides = elementChildren(slidesEl, `.${params.slideClass}, swiper-slide`);
       slides.forEach((el, index) => {
@@ -2251,17 +2413,21 @@
     };
     const clearBlankSlides = () => {
       const slides = elementChildren(slidesEl, `.${params.slideBlankClass}`);
-      slides.forEach(el => el.remove());
+      slides.forEach(el => {
+        el.remove();
+      });
       if (slides.length > 0) {
         swiper.recalcSlides();
         swiper.updateSlides();
       }
     };
-    if (params.loopAddBlankSlides && params.slidesPerGroup > 1) {
+    const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;
+    if (params.loopAddBlankSlides && (params.slidesPerGroup > 1 || gridEnabled)) {
       clearBlankSlides();
     }
-    const slidesPerGroup = params.slidesPerGroup;
+    const slidesPerGroup = params.slidesPerGroup * (gridEnabled ? params.grid.rows : 1);
     const shouldFillGroup = swiper.slides.length % slidesPerGroup !== 0;
+    const shouldFillGrid = gridEnabled && swiper.slides.length % params.grid.rows !== 0;
     const addBlankSlides = amountOfSlides => {
       for (let i = 0; i < amountOfSlides; i += 1) {
         const slideEl = swiper.isElement ? createElement('swiper-slide', [params.slideBlankClass]) : createElement('div', [params.slideClass, params.slideBlankClass]);
@@ -2278,6 +2444,16 @@
         showWarning('Swiper Loop Warning: The number of slides is not even to slidesPerGroup, loop mode may not function properly. You need to add more slides (or make duplicates, or empty slides)');
       }
       initSlides();
+    } else if (shouldFillGrid) {
+      if (params.loopAddBlankSlides) {
+        const slidesToAdd = params.grid.rows - swiper.slides.length % params.grid.rows;
+        addBlankSlides(slidesToAdd);
+        swiper.recalcSlides();
+        swiper.updateSlides();
+      } else {
+        showWarning('Swiper Loop Warning: The number of slides is not even to grid.rows, loop mode may not function properly. You need to add more slides (or make duplicates, or empty slides)');
+      }
+      initSlides();
     } else {
       initSlides();
     }
@@ -2296,12 +2472,13 @@
       setTranslate,
       activeSlideIndex,
       initial,
+      byController,
       byMousewheel
     } = _temp === void 0 ? {} : _temp;
     const swiper = this;
     if (!swiper.params.loop) return;
 
-    // Disable loop mode if number of slides is smaller than slidesPerView
+    // Disable loop mode nếu số slides ít hơn slidesPerView
     const currentSlidesPerView = swiper.params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
     if (swiper.slides.length < currentSlidesPerView) {
       console.warn('Swiper: Loop mode disabled - slides.length < slidesPerView');
@@ -2321,6 +2498,21 @@
     } = params;
     swiper.allowSlidePrev = true;
     swiper.allowSlideNext = true;
+    if (swiper.virtual && params.virtual.enabled) {
+      if (slideTo) {
+        if (!params.centeredSlides && swiper.snapIndex === 0) {
+          swiper.slideTo(swiper.virtual.slides.length, 0, false, true);
+        } else if (params.centeredSlides && swiper.snapIndex < params.slidesPerView) {
+          swiper.slideTo(swiper.virtual.slides.length + swiper.snapIndex, 0, false, true);
+        } else if (swiper.snapIndex === swiper.snapGrid.length - 1) {
+          swiper.slideTo(swiper.virtual.slidesBefore, 0, false, true);
+        }
+      }
+      swiper.allowSlidePrev = allowSlidePrev;
+      swiper.allowSlideNext = allowSlideNext;
+      swiper.emit('loopFix');
+      return;
+    }
     let slidesPerView = params.slidesPerView;
     if (slidesPerView === 'auto') {
       slidesPerView = swiper.slidesPerViewDynamic();
@@ -2330,19 +2522,22 @@
         slidesPerView = slidesPerView + 1;
       }
     }
-    const slidesPerGroup = params.slidesPerGroup;
+    const slidesPerGroup = params.slidesPerGroupAuto ? slidesPerView : params.slidesPerGroup;
     let loopedSlides = centeredSlides ? Math.max(slidesPerGroup, Math.ceil(slidesPerView / 2)) : slidesPerGroup;
     if (loopedSlides % slidesPerGroup !== 0) {
       loopedSlides += slidesPerGroup - loopedSlides % slidesPerGroup;
     }
     loopedSlides += params.loopAdditionalSlides;
     swiper.loopedSlides = loopedSlides;
-    if (slides.length < slidesPerView + loopedSlides) {
+    const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;
+    if (slides.length < slidesPerView + loopedSlides || swiper.params.effect === 'cards' && slides.length < slidesPerView + loopedSlides * 2) {
       showWarning('Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled or not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters');
+    } else if (gridEnabled && params.grid.fill === 'row') {
+      showWarning('Swiper Loop Warning: Loop mode is not compatible with grid.fill = `row`');
     }
     const prependSlidesIndexes = [];
     const appendSlidesIndexes = [];
-    const cols = slides.length;
+    const cols = gridEnabled ? Math.ceil(slides.length / params.grid.rows) : slides.length;
     const isInitialOverflow = initial && cols - initialSlide < slidesPerView && !centeredSlides;
     let activeIndex = isInitialOverflow ? initialSlide : swiper.activeIndex;
     if (typeof activeSlideIndex === 'undefined') {
@@ -2354,15 +2549,24 @@
     const isPrev = direction === 'prev' || !direction;
     let slidesPrepended = 0;
     let slidesAppended = 0;
-    const activeColIndex = activeSlideIndex;
+    const activeColIndex = gridEnabled ? slides[activeSlideIndex].column : activeSlideIndex;
     const activeColIndexWithShift = activeColIndex + (centeredSlides && typeof setTranslate === 'undefined' ? -slidesPerView / 2 + 0.5 : 0);
-
     // prepend last slides before start
     if (activeColIndexWithShift < loopedSlides) {
       slidesPrepended = Math.max(loopedSlides - activeColIndexWithShift, slidesPerGroup);
       for (let i = 0; i < loopedSlides - activeColIndexWithShift; i += 1) {
         const index = i - Math.floor(i / cols) * cols;
-        prependSlidesIndexes.push(cols - index - 1);
+        if (gridEnabled) {
+          const colIndexToPrepend = cols - index - 1;
+          for (let i = slides.length - 1; i >= 0; i -= 1) {
+            if (slides[i].column === colIndexToPrepend) prependSlidesIndexes.push(i);
+          }
+          // slides.forEach((slide, slideIndex) => {
+          //   if (slide.column === colIndexToPrepend) prependSlidesIndexes.push(slideIndex);
+          // });
+        } else {
+          prependSlidesIndexes.push(cols - index - 1);
+        }
       }
     } else if (activeColIndexWithShift + slidesPerView > cols - loopedSlides) {
       slidesAppended = Math.max(activeColIndexWithShift - (cols - loopedSlides * 2), slidesPerGroup);
@@ -2371,13 +2575,27 @@
       }
       for (let i = 0; i < slidesAppended; i += 1) {
         const index = i - Math.floor(i / cols) * cols;
-        appendSlidesIndexes.push(index);
+        if (gridEnabled) {
+          slides.forEach((slide, slideIndex) => {
+            if (slide.column === index) appendSlidesIndexes.push(slideIndex);
+          });
+        } else {
+          appendSlidesIndexes.push(index);
+        }
       }
     }
     swiper.__preventObserver__ = true;
     requestAnimationFrame(() => {
       swiper.__preventObserver__ = false;
     });
+    if (swiper.params.effect === 'cards' && slides.length < slidesPerView + loopedSlides * 2) {
+      if (appendSlidesIndexes.includes(activeSlideIndex)) {
+        appendSlidesIndexes.splice(appendSlidesIndexes.indexOf(activeSlideIndex), 1);
+      }
+      if (prependSlidesIndexes.includes(activeSlideIndex)) {
+        prependSlidesIndexes.splice(prependSlidesIndexes.indexOf(activeSlideIndex), 1);
+      }
+    }
     if (isPrev) {
       prependSlidesIndexes.forEach(index => {
         slides[index].swiperLoopMoveDOM = true;
@@ -2395,6 +2613,10 @@
     swiper.recalcSlides();
     if (params.slidesPerView === 'auto') {
       swiper.updateSlides();
+    } else if (gridEnabled && (prependSlidesIndexes.length > 0 && isPrev || appendSlidesIndexes.length > 0 && isNext)) {
+      swiper.slides.forEach((slide, slideIndex) => {
+        swiper.grid.updateSlide(slideIndex, slide, swiper.slides);
+      });
     }
     if (params.watchSlidesProgress) {
       swiper.updateSlidesOffset();
@@ -2414,10 +2636,12 @@
               swiper.touchEventsData.currentTranslate = swiper.touchEventsData.currentTranslate - diff;
             }
           }
-        } else if (setTranslate) {
-          const shift = prependSlidesIndexes.length;
-          swiper.slideTo(swiper.activeIndex + shift, 0, false, true);
-          swiper.touchEventsData.currentTranslate = swiper.translate;
+        } else {
+          if (setTranslate) {
+            const shift = gridEnabled ? prependSlidesIndexes.length / params.grid.rows : prependSlidesIndexes.length;
+            swiper.slideTo(swiper.activeIndex + shift, 0, false, true);
+            swiper.touchEventsData.currentTranslate = swiper.translate;
+          }
         }
       } else if (appendSlidesIndexes.length > 0 && isNext) {
         if (typeof slideRealIndex === 'undefined') {
@@ -2433,14 +2657,36 @@
               swiper.touchEventsData.currentTranslate = swiper.touchEventsData.currentTranslate - diff;
             }
           }
-        } else if (setTranslate) {
-          const shift = appendSlidesIndexes.length;
+        } else {
+          const shift = gridEnabled ? appendSlidesIndexes.length / params.grid.rows : appendSlidesIndexes.length;
           swiper.slideTo(swiper.activeIndex - shift, 0, false, true);
         }
       }
     }
     swiper.allowSlidePrev = allowSlidePrev;
     swiper.allowSlideNext = allowSlideNext;
+    if (swiper.controller && swiper.controller.control && !byController) {
+      const loopParams = {
+        slideRealIndex,
+        direction,
+        setTranslate,
+        activeSlideIndex,
+        byController: true
+      };
+      if (Array.isArray(swiper.controller.control)) {
+        swiper.controller.control.forEach(c => {
+          if (!c.destroyed && c.params.loop) c.loopFix({
+            ...loopParams,
+            slideTo: c.params.slidesPerView === params.slidesPerView ? slideTo : false
+          });
+        });
+      } else if (swiper.controller.control instanceof swiper.constructor && swiper.controller.control.params.loop) {
+        swiper.controller.control.loopFix({
+          ...loopParams,
+          slideTo: swiper.controller.control.params.slidesPerView === params.slidesPerView ? slideTo : false
+        });
+      }
+    }
     swiper.emit('loopFix');
   }
 
@@ -2457,7 +2703,7 @@
     const swiper = this;
     if (!swiper.params.loop) return;
 
-    // Disable loop mode if number of slides is smaller than slidesPerView
+    // Disable loop mode nếu số slides ít hơn slidesPerView
     const currentSlidesPerView = swiper.params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
     if (swiper.slides.length < currentSlidesPerView) {
       console.warn('Swiper: Loop mode disabled - slides.length < slidesPerView');
@@ -2496,7 +2742,7 @@
     }
     loopedSlides += params.loopAdditionalSlides;
     swiper.loopedSlides = loopedSlides;
-    if (slides.length < slidesPerView + loopedSlides) {
+    if (slides.length < slidesPerView + loopedSlides || swiper.params.effect === 'cards' && slides.length < slidesPerView + loopedSlides * 2) {
       showWarning('Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled or not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters');
     }
     const isNext = direction === 'next' || !direction;
@@ -2522,16 +2768,20 @@
       activeSlideIndex = swiper.getSlideIndex(slides.find(el => el.classList.contains(params.slideActiveClass)));
     }
 
-    // DocumentFragment to hold slide clones
+    // Tạo DocumentFragment để chứa các slide clone
     const cloneFragment = document.createDocumentFragment();
 
-    // Clone slides according to numberOfSlidesNeedClone and append to fragment
+    // Clone các slide theo numberOfSlidesNeedClone (đã đảo ngược) và thêm vào fragment
     (isNext ? numberOfSlidesNeedClone : numberOfSlidesNeedClone.reverse()).forEach(index => {
       if (slides[index]) {
         const originalSlide = slides[index];
         const clonedSlide = originalSlide.cloneNode(true);
+
+        // Đánh dấu slide clone
         clonedSlide.setAttribute('data-swiper-clone', 'true');
         clonedSlide.classList.add('swiper-slide-clone');
+
+        // Thêm clone vào fragment
         cloneFragment.appendChild(clonedSlide);
       }
     });
@@ -2552,28 +2802,32 @@
       });
     }
 
-    // Sort cloned slides by data-swiper-slide-index
+    // Sắp xếp cloneFragment theo data-swiper-slide-index tăng dần
     const clonedSlides = Array.from(cloneFragment.children);
     clonedSlides.sort((a, b) => {
       const indexA = parseInt(a.getAttribute('data-swiper-slide-index')) || 0;
       const indexB = parseInt(b.getAttribute('data-swiper-slide-index')) || 0;
       return indexA - indexB;
     });
+
+    // Xóa tất cả children cũ và thêm lại theo thứ tự đã sắp xếp
     cloneFragment.innerHTML = '';
     clonedSlides.forEach(slide => {
       cloneFragment.appendChild(slide);
     });
 
-    // Place fragment into the right position
+    // Thêm fragment vào vị trí phù hợp
     if (isPrev) {
+      // Nếu là prev, thêm fragment vào cuối slidesEl
       slidesEl.appendChild(cloneFragment);
     } else if (isNext) {
+      // Nếu là next, thêm fragment vào đầu slidesEl
       slidesEl.insertBefore(cloneFragment, slidesEl.firstChild);
     }
     swiper.recalcSlides();
     swiper.updateSlides();
 
-    // Find old active slide index after recalculation
+    // Tìm slide có data-swiper-slide-index tương ứng
     let oldActiveIndex = null;
     for (let i = 0; i < slidesEl.children.length; i++) {
       const child = slidesEl.children[i];
@@ -2586,7 +2840,7 @@
       swiper.slideTo(oldActiveIndex, 0);
     }
 
-    // Update translate after removing clones for animation
+    // Tìm vị trí slide cũ sau khi remove clone để set lại translate tạo hiệu ứng animate
     const skip = Math.min(swiper.params.slidesPerGroupSkip, newIndex);
     let snapIndex = skip + Math.floor((newIndex - skip) / swiper.params.slidesPerGroup);
     if (snapIndex >= swiper.snapGrid.length) snapIndex = swiper.snapGrid.length - 1;
@@ -2612,8 +2866,7 @@
       }
       swiper.setTranslate(updateTranslate);
     }
-
-    // Remove clones
+    // Remove slide clone ra khỏi slidesEl sau khi slideTo hoàn thành
     const cloneSlides = slidesEl.querySelectorAll('[data-swiper-clone="true"]');
     cloneSlides.forEach(cloneSlide => {
       if (cloneSlide.parentNode) {
@@ -2643,7 +2896,7 @@
       params,
       slidesEl
     } = swiper;
-    if (!params.loop || !slidesEl) return;
+    if (!params.loop || !slidesEl || swiper.virtual && swiper.params.virtual.enabled) return;
     swiper.recalcSlides();
     const newSlidesOrder = [];
     swiper.slides.forEach(slideEl => {
@@ -2704,6 +2957,7 @@
     unsetGrabCursor
   };
 
+  // Modified from https://stackoverflow.com/questions/54520554/custom-element-getrootnode-closest-function-crossing-multiple-parent-shadowd
   function closestElement(selector, base) {
     if (base === void 0) {
       base = this;
@@ -2712,7 +2966,9 @@
       if (!el || el === getDocument() || el === getWindow()) return null;
       if (el.assignedSlot) el = el.assignedSlot;
       const found = el.closest(selector);
-      if (!found && !el.getRootNode) return null;
+      if (!found && !el.getRootNode) {
+        return null;
+      }
       return found || __closestFrom(el.getRootNode().host);
     }
     return __closestFrom(base);
@@ -2740,7 +2996,9 @@
     if (e.originalEvent) e = e.originalEvent;
     const data = swiper.touchEventsData;
     if (e.type === 'pointerdown') {
-      if (data.pointerId !== null && data.pointerId !== e.pointerId) return;
+      if (data.pointerId !== null && data.pointerId !== e.pointerId) {
+        return;
+      }
       data.pointerId = e.pointerId;
     } else if (e.type === 'touchstart' && e.targetTouches.length === 1) {
       data.touchId = e.targetTouches[0].identifier;
@@ -2757,7 +3015,9 @@
     } = swiper;
     if (!enabled) return;
     if (!params.simulateTouch && e.pointerType === 'mouse') return;
-    if (swiper.animating && params.preventInteractionOnTransition) return;
+    if (swiper.animating && params.preventInteractionOnTransition) {
+      return;
+    }
     if (!swiper.animating && params.cssMode && params.loop) {
       swiper.loopFix();
     }
@@ -2768,6 +3028,8 @@
     if ('which' in e && e.which === 3) return;
     if ('button' in e && e.button > 0) return;
     if (data.isTouched && data.isMoved) return;
+
+    // change target el for shadow root component
     const swipingClassHasValue = !!params.noSwipingClass && params.noSwipingClass !== '';
     // eslint-disable-next-line
     const eventPath = e.composedPath ? e.composedPath() : e.path;
@@ -2776,6 +3038,8 @@
     }
     const noSwipingSelector = params.noSwipingSelector ? params.noSwipingSelector : `.${params.noSwipingClass}`;
     const isTargetShadow = !!(e.target && e.target.shadowRoot);
+
+    // use closestElement for shadow root element to get the actual closest for nested shadow root element
     if (params.noSwiping && (isTargetShadow ? closestElement(noSwipingSelector, targetEl) : targetEl.closest(noSwipingSelector))) {
       swiper.allowClick = true;
       return;
@@ -2787,7 +3051,12 @@
     touches.currentY = e.pageY;
     const startX = touches.currentX;
     const startY = touches.currentY;
-    if (!preventEdgeSwipe(swiper, e, startX)) return;
+
+    // Do NOT start if iOS edge swipe is detected. Otherwise iOS app cannot swipe-to-go-back anymore
+
+    if (!preventEdgeSwipe(swiper, e, startX)) {
+      return;
+    }
     Object.assign(data, {
       isTouched: true,
       isMoved: false,
@@ -2816,6 +3085,9 @@
     if ((params.touchStartForcePreventDefault || shouldPreventDefault) && !targetEl.isContentEditable) {
       e.preventDefault();
     }
+    if (params.freeMode && params.freeMode.enabled && swiper.freeMode && swiper.animating && !params.cssMode) {
+      swiper.freeMode.onTouchStart();
+    }
     swiper.emit('touchStart', e);
   }
 
@@ -2834,7 +3106,7 @@
     let e = event;
     if (e.originalEvent) e = e.originalEvent;
     if (e.type === 'pointermove') {
-      if (data.touchId !== null) return;
+      if (data.touchId !== null) return; // return from pointer if we use touch
       const id = e.pointerId;
       if (id !== data.pointerId) return;
     }
@@ -2875,6 +3147,7 @@
     }
     if (params.touchReleaseOnEdges && !params.loop) {
       if (swiper.isVertical()) {
+        // Vertical
         if (pageY < touches.startY && swiper.translate <= swiper.maxTranslate() || pageY > touches.startY && swiper.translate >= swiper.minTranslate()) {
           data.isTouched = false;
           data.isMoved = false;
@@ -2976,6 +3249,7 @@
         swiper.wrapperEl.dispatchEvent(evt);
       }
       data.allowMomentumBounce = false;
+      // Grab Cursor
       if (params.grabCursor && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {
         swiper.setGrabCursor(true);
       }
@@ -3046,6 +3320,8 @@
     if (!swiper.allowSlidePrev && !swiper.allowSlideNext) {
       data.currentTranslate = data.startTranslate;
     }
+
+    // Threshold
     if (params.threshold > 0) {
       if (Math.abs(diff) > params.threshold || data.allowThresholdMove) {
         if (!data.allowThresholdMove) {
@@ -3063,12 +3339,17 @@
     }
     if (!params.followFinger || params.cssMode) return;
 
-    // core-lite: no optional feature updates; only watchSlidesProgress
-    if (params.watchSlidesProgress) {
+    // Update active index in free mode
+    if (params.freeMode && params.freeMode.enabled && swiper.freeMode || params.watchSlidesProgress) {
       swiper.updateActiveIndex();
       swiper.updateSlidesClasses();
     }
+    if (params.freeMode && params.freeMode.enabled && swiper.freeMode) {
+      swiper.freeMode.onTouchMove();
+    }
+    // Update progress
     swiper.updateProgress(data.currentTranslate);
+    // Update translate
     swiper.setTranslate(data.currentTranslate);
   }
 
@@ -3080,7 +3361,7 @@
     let targetTouch;
     const isTouchEvent = e.type === 'touchend' || e.type === 'touchcancel';
     if (!isTouchEvent) {
-      if (data.touchId !== null) return;
+      if (data.touchId !== null) return; // return from pointer if we use touch
       if (e.pointerId !== data.pointerId) return;
       targetTouch = e;
     } else {
@@ -3089,7 +3370,9 @@
     }
     if (['pointercancel', 'pointerout', 'pointerleave', 'contextmenu'].includes(e.type)) {
       const proceed = ['pointercancel', 'contextmenu'].includes(e.type) && (swiper.browser.isSafari || swiper.browser.isWebView);
-      if (!proceed) return;
+      if (!proceed) {
+        return;
+      }
     }
     data.pointerId = null;
     data.touchId = null;
@@ -3107,7 +3390,9 @@
     }
     data.allowTouchCallbacks = false;
     if (!data.isTouched) {
-      if (data.isMoved && params.grabCursor) swiper.setGrabCursor(false);
+      if (data.isMoved && params.grabCursor) {
+        swiper.setGrabCursor(false);
+      }
       data.isMoved = false;
       data.startMoving = false;
       return;
@@ -3117,6 +3402,8 @@
     if (params.grabCursor && data.isMoved && data.isTouched && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {
       swiper.setGrabCursor(false);
     }
+
+    // Time diff
     const touchEndTime = now();
     const timeDiff = touchEndTime - data.touchStartTime;
 
@@ -3143,8 +3430,20 @@
     data.isMoved = false;
     data.startMoving = false;
     let currentPos;
-    if (params.followFinger) currentPos = rtl ? swiper.translate : -swiper.translate;else currentPos = -data.currentTranslate;
-    if (params.cssMode) return;
+    if (params.followFinger) {
+      currentPos = rtl ? swiper.translate : -swiper.translate;
+    } else {
+      currentPos = -data.currentTranslate;
+    }
+    if (params.cssMode) {
+      return;
+    }
+    if (params.freeMode && params.freeMode.enabled) {
+      swiper.freeMode.onTouchEnd({
+        currentPos
+      });
+      return;
+    }
 
     // Find current slide
     const swipeToLast = currentPos >= -swiper.maxTranslate() && !swiper.params.loop;
@@ -3166,22 +3465,22 @@
     let rewindLastIndex = null;
     if (params.rewind) {
       if (swiper.isBeginning) {
-        rewindLastIndex = swiper.slides.length - 1;
+        rewindLastIndex = params.virtual && params.virtual.enabled && swiper.virtual ? swiper.virtual.slides.length - 1 : swiper.slides.length - 1;
       } else if (swiper.isEnd) {
         rewindFirstIndex = 0;
       }
     }
+    // Find current slide size
     const ratio = (currentPos - slidesGrid[stopIndex]) / groupSize;
     const increment = stopIndex < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;
     if (timeDiff > params.longSwipesMs) {
+      // Long touches
       if (!params.longSwipes) {
         swiper.slideTo(swiper.activeIndex);
         return;
       }
       if (swiper.swipeDirection === 'next') {
-        if (ratio >= params.longSwipesRatio) {
-          swiper.slideTo(params.rewind && swiper.isEnd ? rewindFirstIndex : stopIndex + increment);
-        } else swiper.slideTo(stopIndex);
+        if (ratio >= params.longSwipesRatio) swiper.slideTo(params.rewind && swiper.isEnd ? rewindFirstIndex : stopIndex + increment);else swiper.slideTo(stopIndex);
       }
       if (swiper.swipeDirection === 'prev') {
         if (ratio > 1 - params.longSwipesRatio) {
@@ -3233,6 +3532,7 @@
       allowSlidePrev,
       snapGrid
     } = swiper;
+    const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
 
     // Disable locks on resize
     swiper.allowSlideNext = true;
@@ -3240,12 +3540,15 @@
     swiper.updateSize();
     swiper.updateSlides();
     swiper.updateSlidesClasses();
-    if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !swiper.isBeginning && !swiper.params.centeredSlides) {
+    const isVirtualLoop = isVirtual && params.loop;
+    if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !swiper.isBeginning && !swiper.params.centeredSlides && !isVirtualLoop) {
       swiper.slideTo(swiper.slides.length - 1, 0, false, true);
-    } else if (swiper.params.loop) {
-      swiper.slideToLoop(swiper.realIndex, 0, false, true);
     } else {
-      swiper.slideTo(swiper.activeIndex, 0, false, true);
+      if (swiper.params.loop && !isVirtual) {
+        swiper.slideToLoop(swiper.realIndex, 0, false, true);
+      } else {
+        swiper.slideTo(swiper.activeIndex, 0, false, true);
+      }
     }
     if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
       clearTimeout(swiper.autoplay.resizeTimeout);
@@ -3255,11 +3558,10 @@
         }
       }, 500);
     }
-
     // Return locks after resize
     swiper.allowSlidePrev = allowSlidePrev;
     swiper.allowSlideNext = allowSlideNext;
-    if (params.watchOverflow && snapGrid !== swiper.snapGrid) {
+    if (swiper.params.watchOverflow && snapGrid !== swiper.snapGrid) {
       swiper.checkOverflow();
     }
   }
@@ -3313,10 +3615,6 @@
     if (swiper.params.cssMode || swiper.params.slidesPerView !== 'auto' && !swiper.params.autoHeight) {
       return;
     }
-    const el = e?.target;
-    // IMG, IFRAME, EMBED with width/height attributes don't change slide size — no need to call swiper.update()
-    if (!el || !['IMG', 'IFRAME', 'EMBED'].includes(el.tagName)) return;
-    if (el.hasAttribute('width') && el.hasAttribute('height')) return;
     swiper.update();
   }
 
@@ -3428,15 +3726,8 @@
     detachEvents
   };
 
-  const toggleModule = (swiper, params, breakpointParams, prop) => {
-    const wasModuleEnabled = params[prop] && params[prop].enabled;
-    const isModuleEnabled = breakpointParams[prop] && breakpointParams[prop].enabled;
-    if (wasModuleEnabled && !isModuleEnabled) {
-      swiper[prop].disable();
-    }
-    if (!wasModuleEnabled && isModuleEnabled) {
-      swiper[prop].enable();
-    }
+  const isGridEnabled = (swiper, params) => {
+    return swiper.grid && params.grid && params.grid.rows > 1;
   };
   function setBreakpoint() {
     const swiper = this;
@@ -3457,20 +3748,38 @@
     if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;
     const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
     const breakpointParams = breakpointOnlyParams || swiper.originalParams;
+    const wasMultiRow = isGridEnabled(swiper, params);
+    const isMultiRow = isGridEnabled(swiper, breakpointParams);
     const wasGrabCursor = swiper.params.grabCursor;
     const isGrabCursor = breakpointParams.grabCursor;
     const wasEnabled = params.enabled;
+    if (wasMultiRow && !isMultiRow) {
+      el.classList.remove(`${params.containerModifierClass}grid`, `${params.containerModifierClass}grid-column`);
+      swiper.emitContainerClasses();
+    } else if (!wasMultiRow && isMultiRow) {
+      el.classList.add(`${params.containerModifierClass}grid`);
+      if (breakpointParams.grid.fill && breakpointParams.grid.fill === 'column' || !breakpointParams.grid.fill && params.grid.fill === 'column') {
+        el.classList.add(`${params.containerModifierClass}grid-column`);
+      }
+      swiper.emitContainerClasses();
+    }
     if (wasGrabCursor && !isGrabCursor) {
       swiper.unsetGrabCursor();
     } else if (!wasGrabCursor && isGrabCursor) {
       swiper.setGrabCursor();
     }
 
-    // Core-lite: toggle navigation & pagination only.
-    const modules = ['navigation', 'pagination'];
-    modules.forEach(prop => {
+    // Toggle navigation, pagination, scrollbar
+    ['navigation', 'pagination', 'scrollbar'].forEach(prop => {
       if (typeof breakpointParams[prop] === 'undefined') return;
-      toggleModule(swiper, params, breakpointParams, prop);
+      const wasModuleEnabled = params[prop] && params[prop].enabled;
+      const isModuleEnabled = breakpointParams[prop] && breakpointParams[prop].enabled;
+      if (wasModuleEnabled && !isModuleEnabled) {
+        swiper[prop].disable();
+      }
+      if (!wasModuleEnabled && isModuleEnabled) {
+        swiper[prop].enable();
+      }
     });
     const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;
     const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
@@ -3552,7 +3861,7 @@
     getBreakpoint
   };
 
-  const prepareClasses = (entries, prefix) => {
+  function prepareClasses(entries, prefix) {
     const resultClasses = [];
     entries.forEach(item => {
       if (typeof item === 'object') {
@@ -3566,7 +3875,7 @@
       }
     });
     return resultClasses;
-  };
+  }
   function addClasses() {
     const swiper = this;
     const {
@@ -3576,12 +3885,17 @@
       el,
       device
     } = swiper;
-    // core-lite: removed module-specific classes
     // prettier-ignore
     const suffixes = prepareClasses(['initialized', params.direction, {
+      'free-mode': swiper.params.freeMode && params.freeMode.enabled
+    }, {
       'autoheight': params.autoHeight
     }, {
       'rtl': rtl
+    }, {
+      'grid': params.grid && params.grid.rows > 1
+    }, {
+      'grid-column': params.grid && params.grid.rows > 1 && params.grid.fill === 'column'
     }, {
       'android': device.android
     }, {
@@ -3678,12 +3992,16 @@
     autoHeight: false,
     // Set wrapper width
     setWrapperSize: false,
-    // Effects (core-lite only supports `slide`)
+    // Virtual Translate
+    virtualTranslate: false,
+    // Effects
     effect: 'slide',
+    // 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
+
     // Breakpoints
     breakpoints: undefined,
     breakpointsBase: 'window',
-    // Slides
+    // Slides grid
     spaceBetween: 0,
     slidesPerView: 1,
     slidesPerGroup: 1,
@@ -3786,9 +4104,7 @@
       if (moduleParamName === 'navigation' && params[moduleParamName] && params[moduleParamName].enabled && !params[moduleParamName].prevEl && !params[moduleParamName].nextEl) {
         params[moduleParamName].auto = true;
       }
-
-      // Core-lite: keep only pagination auto-init.
-      if (moduleParamName === 'pagination' && params[moduleParamName] && params[moduleParamName].enabled && !params[moduleParamName].el) {
+      if (['pagination', 'scrollbar'].indexOf(moduleParamName) >= 0 && params[moduleParamName] && params[moduleParamName].enabled && !params[moduleParamName].el) {
         params[moduleParamName].auto = true;
       }
       if (!(moduleParamName in params && 'enabled' in moduleParams)) {
@@ -3914,6 +4230,7 @@
         // Indexes
         activeIndex: 0,
         realIndex: 0,
+        //
         isBeginning: true,
         isEnd: false,
         // Props
@@ -3940,9 +4257,12 @@
           currentTranslate: undefined,
           startTranslate: undefined,
           allowThresholdMove: undefined,
+          // Form elements to match
           focusableElements: swiper.params.focusableElements,
+          // Last click time
           lastClickTime: 0,
           clickTimeout: undefined,
+          // Velocities
           velocities: [],
           allowMomentumBounce: undefined,
           startMoving: undefined,
@@ -3971,6 +4291,7 @@
         swiper.init();
       }
 
+      // Return app instance
       // eslint-disable-next-line no-constructor-return
       return swiper;
     }
@@ -4002,6 +4323,16 @@
     getSlideIndexByData(index) {
       return this.getSlideIndex(this.slides.find(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === index));
     }
+    getSlideIndexWhenGrid(index) {
+      if (this.grid && this.params.grid && this.params.grid.rows > 1) {
+        if (this.params.grid.fill === 'column') {
+          index = Math.floor(index / this.params.grid.rows);
+        } else if (this.params.grid.fill === 'row') {
+          index = index % Math.ceil(this.slides.length / this.params.grid.rows);
+        }
+      }
+      return index;
+    }
     recalcSlides() {
       const swiper = this;
       const {
@@ -4103,15 +4434,21 @@
           }
         }
       } else {
+        // eslint-disable-next-line
         if (view === 'current') {
           for (let i = activeIndex + 1; i < slides.length; i += 1) {
             const slideInView = exact ? slidesGrid[i] + slidesSizesGrid[i] - slidesGrid[activeIndex] < swiperSize : slidesGrid[i] - slidesGrid[activeIndex] < swiperSize;
-            if (slideInView) spv += 1;
+            if (slideInView) {
+              spv += 1;
+            }
           }
         } else {
+          // previous
           for (let i = activeIndex - 1; i >= 0; i -= 1) {
             const slideInView = slidesGrid[activeIndex] - slidesGrid[i] < swiperSize;
-            if (slideInView) spv += 1;
+            if (slideInView) {
+              spv += 1;
+            }
           }
         }
       }
@@ -4124,11 +4461,14 @@
         snapGrid,
         params
       } = swiper;
+      // Breakpoints
       if (params.breakpoints) {
         swiper.setBreakpoint();
       }
       [...swiper.el.querySelectorAll('[loading="lazy"]')].forEach(imageEl => {
-        if (imageEl.complete) processLazyPreloader(swiper, imageEl);
+        if (imageEl.complete) {
+          processLazyPreloader(swiper, imageEl);
+        }
       });
       swiper.updateSize();
       swiper.updateSlides();
@@ -4142,12 +4482,22 @@
         swiper.updateSlidesClasses();
       }
       let translated;
-      if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !params.centeredSlides) {
-        translated = swiper.slideTo(swiper.slides.length - 1, 0, false, true);
+      if (params.freeMode && params.freeMode.enabled && !params.cssMode) {
+        setTranslate();
+        if (params.autoHeight) {
+          swiper.updateAutoHeight();
+        }
       } else {
-        translated = swiper.slideTo(swiper.activeIndex, 0, false, true);
+        if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !params.centeredSlides) {
+          const 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);
+        }
+        if (!translated) {
+          setTranslate();
+        }
       }
-      if (!translated) setTranslate();
       if (params.watchOverflow && snapGrid !== swiper.snapGrid) {
         swiper.checkOverflow();
       }
@@ -4160,6 +4510,7 @@
       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') {
@@ -4197,11 +4548,15 @@
     mount(element) {
       const swiper = this;
       if (swiper.mounted) return true;
+
+      // Find el
       let el = element || swiper.params.el;
       if (typeof el === 'string') {
         el = document.querySelector(el);
       }
-      if (!el) return false;
+      if (!el) {
+        return false;
+      }
       el.swiper = swiper;
       if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === swiper.params.swiperElementNodeName.toUpperCase()) {
         swiper.isElement = true;
@@ -4212,10 +4567,12 @@
       const getWrapper = () => {
         if (el && el.shadowRoot && el.shadowRoot.querySelector) {
           const res = el.shadowRoot.querySelector(getWrapperSelector());
+          // Children needs to return slot items
           return res;
         }
         return elementChildren(el, getWrapperSelector())[0];
       };
+      // Find Wrapper
       let wrapperEl = getWrapper();
       if (!wrapperEl && swiper.params.createElements) {
         wrapperEl = createElement('div', swiper.params.wrapperClass);
@@ -4230,6 +4587,7 @@
         slidesEl: swiper.isElement && !el.parentNode.host.slideSlots ? el.parentNode.host : wrapperEl,
         hostEl: swiper.isElement ? el.parentNode.host : el,
         mounted: true,
+        // RTL
         rtl: el.dir.toLowerCase() === 'rtl' || elementStyle(el, 'direction') === 'rtl',
         rtlTranslate: swiper.params.direction === 'horizontal' && (el.dir.toLowerCase() === 'rtl' || elementStyle(el, 'direction') === 'rtl'),
         wrongRTL: elementStyle(wrapperEl, 'display') === '-webkit-box'
@@ -4249,6 +4607,7 @@
           const gap = Math.abs(swiper.snapGrid[1] - swiper.snapGrid[0]);
           const swiperTranslate = structuredClone(swiper.snapGrid[1]);
           if (isFirstSlide) {
+            // Move last item to first position when at first slide
             const lastSlide = slides.at(-1);
             lastSlide.swiperLoopMoveDOM = true;
             swiper.slidesEl.prepend(lastSlide);
@@ -4260,6 +4619,7 @@
             swiper.setTransition(speed);
             swiper.setTranslate(-swiperTranslate);
           } else if (isLastSlide) {
+            // Move first item to last position when at last slide
             const firstSlide = slides[0];
             firstSlide.swiperLoopMoveDOM = true;
             swiper.slidesEl.append(firstSlide);
@@ -4280,24 +4640,42 @@
       const mounted = swiper.mount(el);
       if (mounted === false) return swiper;
       swiper.emit('beforeInit');
+
+      // Set breakpoint
       if (swiper.params.breakpoints) {
         swiper.setBreakpoint();
       }
+
+      // Add Classes
       swiper.addClasses();
+
+      // Update size
       swiper.updateSize();
+
+      // Update slides
       swiper.updateSlides();
       if (swiper.params.watchOverflow) {
         swiper.checkOverflow();
       }
+
+      // Set Grab Cursor
       if (swiper.params.grabCursor && swiper.enabled) {
         swiper.setGrabCursor();
       }
 
-      // Slide to initial slide (core-lite: no optional feature initial offsets)
-      swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit, false, true);
+      // Slide To Initial Slide
+      if (swiper.params.loop && swiper.virtual && swiper.params.virtual.enabled) {
+        swiper.slideTo(swiper.params.initialSlide + swiper.virtual.slidesBefore, 0, swiper.params.runCallbacksOnInit, false, true);
+      } else {
+        swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit, false, true);
+      }
+
+      // Create loop
       if (swiper.params.loop) {
         swiper.loopCreate(undefined, true);
       }
+
+      // Attach events
       swiper.attachEvents();
       const lazyElements = [...swiper.el.querySelectorAll('[loading="lazy"]')];
       if (swiper.isElement) {
@@ -4307,12 +4685,18 @@
         if (imageEl.complete) {
           processLazyPreloader(swiper, imageEl);
         } else {
-          imageEl.addEventListener('load', e => processLazyPreloader(swiper, e.target));
+          imageEl.addEventListener('load', e => {
+            processLazyPreloader(swiper, e.target);
+          });
         }
       });
       preload(swiper);
+
+      // Init Flag
       swiper.initialized = true;
       preload(swiper);
+
+      // Emit
       swiper.emit('init');
       swiper.emit('afterInit');
       return swiper;
@@ -4335,15 +4719,27 @@
         return null;
       }
       swiper.emit('beforeDestroy');
+
+      // Init Flag
       swiper.initialized = false;
+
+      // Detach events
       swiper.detachEvents();
+
+      // Destroy loop
       if (params.loop) {
         swiper.loopDestroy();
       }
+
+      // Cleanup styles
       if (cleanStyles) {
         swiper.removeClasses();
-        if (el && typeof el !== 'string') el.removeAttribute('style');
-        if (wrapperEl) wrapperEl.removeAttribute('style');
+        if (el && typeof el !== 'string') {
+          el.removeAttribute('style');
+        }
+        if (wrapperEl) {
+          wrapperEl.removeAttribute('style');
+        }
         if (slides && slides.length) {
           slides.forEach(slideEl => {
             slideEl.classList.remove(params.slideVisibleClass, params.slideFullyVisibleClass, params.slideActiveClass, params.slideNextClass, params.slidePrevClass);
@@ -4353,6 +4749,8 @@
         }
       }
       swiper.emit('destroy');
+
+      // Detach emitter events
       Object.keys(swiper.eventsListeners).forEach(eventName => {
         swiper.off(eventName);
       });
@@ -4723,7 +5121,7 @@
   }
 
   /**
-   * Swiper Custom Element 0.0.15-dev.1
+   * Swiper Custom Element 0.0.15
    * Gem SDK - Swiper, Customized of swiper
    * https://swiperjs.com
    *