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

package/shared/swiper-core.mjs

@@ -382,6 +382,9 @@ function updateSize() {
 
 function updateSlides() {
   const swiper = this;
+  function getDirectionPropertyValue(node, label) {
+    return parseFloat(node.getPropertyValue(swiper.getDirectionLabel(label)) || 0);
+  }
   const params = swiper.params;
   const {
     wrapperEl,
@@ -390,8 +393,10 @@ function updateSlides() {
     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 = [];
@@ -409,15 +414,15 @@ function updateSlides() {
   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 => {
@@ -435,34 +440,49 @@ function updateSlides() {
     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;
@@ -474,8 +494,12 @@ function updateSlides() {
           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;
@@ -484,13 +508,13 @@ function updateSlides() {
         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);
@@ -498,37 +522,55 @@ function updateSlides() {
       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];
@@ -536,7 +578,9 @@ function updateSlides() {
     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`;
@@ -586,9 +630,7 @@ function updateSlides() {
     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) {
@@ -602,7 +644,7 @@ function updateSlides() {
     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) {
@@ -616,13 +658,20 @@ function updateSlides() {
 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) {
@@ -630,9 +679,9 @@ function updateAutoHeight(speed) {
         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));
       }
     }
@@ -641,13 +690,14 @@ function updateAutoHeight(speed) {
   }
 
   // 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`;
 }
 
@@ -792,16 +842,46 @@ function updateSlidesClasses() {
     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);
@@ -892,6 +972,7 @@ function getActiveIndexByTranslate(swiper) {
       activeIndex = i;
     }
   }
+  // Normalize slideIndex
   if (params.normalizeSlideIndex) {
     if (activeIndex < 0 || typeof activeIndex === 'undefined') activeIndex = 0;
   }
@@ -909,6 +990,16 @@ function updateActiveIndex(newActiveIndex) {
   } = 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);
   }
@@ -926,12 +1017,32 @@ function updateActiveIndex(newActiveIndex) {
     }
     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,
@@ -978,7 +1089,11 @@ function updateClickedSlide(el, path) {
   }
   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;
@@ -1012,6 +1127,9 @@ function getSwiperTranslate(axis) {
     translate,
     wrapperEl
   } = swiper;
+  if (params.virtualTranslate) {
+    return rtl ? -translate : translate;
+  }
   if (params.cssMode) {
     return translate;
   }
@@ -1045,7 +1163,7 @@ function setTranslate(translate, byController) {
   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 {
@@ -1282,6 +1400,7 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
   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);
@@ -1298,24 +1417,33 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
       }
     }
   }
-
   // 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();
     }
@@ -1333,7 +1461,24 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
     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({
@@ -1351,7 +1496,10 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
     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);
@@ -1522,6 +1670,8 @@ function slideToLoopCenterSneakPeek(index, speed, runCallbacks, internal) {
   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);
@@ -1556,8 +1706,11 @@ function slideNext(speed, runCallbacks, internal) {
     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({
@@ -1584,6 +1737,7 @@ function slideNext(speed, runCallbacks, internal) {
       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);
@@ -1608,14 +1762,17 @@ function slidePrev(speed, runCallbacks, internal) {
     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({
@@ -1632,16 +1789,18 @@ function slidePrev(speed, runCallbacks, internal) {
   }
   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;
@@ -1654,7 +1813,7 @@ function slidePrev(speed, runCallbacks, internal) {
     }
   }
   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(() => {
@@ -1668,6 +1827,8 @@ function slidePrev(speed, runCallbacks, internal) {
     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;
@@ -1744,19 +1905,20 @@ function slideToClickedSlide() {
     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);
@@ -1783,7 +1945,7 @@ function loopCreate(slideRealIndex, initial) {
     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) => {
@@ -1792,17 +1954,21 @@ function loopCreate(slideRealIndex, initial) {
   };
   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]);
@@ -1819,6 +1985,16 @@ function loopCreate(slideRealIndex, initial) {
       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();
   }
@@ -1837,12 +2013,13 @@ function loopFix(_temp) {
     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');
@@ -1862,6 +2039,21 @@ function loopFix(_temp) {
   } = 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();
@@ -1871,19 +2063,22 @@ function loopFix(_temp) {
       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') {
@@ -1895,15 +2090,24 @@ function loopFix(_temp) {
   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);
@@ -1912,13 +2116,27 @@ function loopFix(_temp) {
     }
     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;
@@ -1936,6 +2154,10 @@ function loopFix(_temp) {
   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();
@@ -1955,10 +2177,12 @@ function loopFix(_temp) {
             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') {
@@ -1974,14 +2198,36 @@ function loopFix(_temp) {
             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');
 }
 
@@ -1998,7 +2244,7 @@ function loopFixDot(_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');
@@ -2037,7 +2283,7 @@ function loopFixDot(_temp) {
   }
   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;
@@ -2063,16 +2309,20 @@ function loopFixDot(_temp) {
     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);
     }
   });
@@ -2093,28 +2343,32 @@ function loopFixDot(_temp) {
     });
   }
 
-  // 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];
@@ -2127,7 +2381,7 @@ function loopFixDot(_temp) {
     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;
@@ -2153,8 +2407,7 @@ function loopFixDot(_temp) {
     }
     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) {
@@ -2184,7 +2437,7 @@ function loopDestroy() {
     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 => {
@@ -2245,6 +2498,7 @@ var grabCursor = {
   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;
@@ -2253,7 +2507,9 @@ function closestElement(selector, base) {
     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);
@@ -2281,7 +2537,9 @@ function onTouchStart(event) {
   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;
@@ -2298,7 +2556,9 @@ function onTouchStart(event) {
   } = 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();
   }
@@ -2309,6 +2569,8 @@ function onTouchStart(event) {
   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;
@@ -2317,6 +2579,8 @@ function onTouchStart(event) {
   }
   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;
@@ -2328,7 +2592,12 @@ function onTouchStart(event) {
   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,
@@ -2357,6 +2626,9 @@ function onTouchStart(event) {
   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);
 }
 
@@ -2375,7 +2647,7 @@ function onTouchMove(event) {
   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;
   }
@@ -2416,6 +2688,7 @@ function onTouchMove(event) {
   }
   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;
@@ -2517,6 +2790,7 @@ function onTouchMove(event) {
       swiper.wrapperEl.dispatchEvent(evt);
     }
     data.allowMomentumBounce = false;
+    // Grab Cursor
     if (params.grabCursor && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {
       swiper.setGrabCursor(true);
     }
@@ -2587,6 +2861,8 @@ function onTouchMove(event) {
   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) {
@@ -2604,12 +2880,17 @@ function onTouchMove(event) {
   }
   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);
 }
 
@@ -2621,7 +2902,7 @@ function onTouchEnd(event) {
   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 {
@@ -2630,7 +2911,9 @@ function onTouchEnd(event) {
   }
   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;
@@ -2648,7 +2931,9 @@ function onTouchEnd(event) {
   }
   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;
@@ -2658,6 +2943,8 @@ function onTouchEnd(event) {
   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;
 
@@ -2684,8 +2971,20 @@ function onTouchEnd(event) {
   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;
@@ -2707,22 +3006,22 @@ function onTouchEnd(event) {
   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) {
@@ -2774,6 +3073,7 @@ function onResize() {
     allowSlidePrev,
     snapGrid
   } = swiper;
+  const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
 
   // Disable locks on resize
   swiper.allowSlideNext = true;
@@ -2781,12 +3081,15 @@ function onResize() {
   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);
@@ -2796,11 +3099,10 @@ function onResize() {
       }
     }, 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();
   }
 }
@@ -2854,10 +3156,6 @@ function onLoad(e) {
   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();
 }
 
@@ -2969,15 +3267,8 @@ var events$1 = {
   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;
@@ -2998,20 +3289,38 @@ function setBreakpoint() {
   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);
@@ -3093,7 +3402,7 @@ var breakpoints = {
   getBreakpoint
 };
 
-const prepareClasses = (entries, prefix) => {
+function prepareClasses(entries, prefix) {
   const resultClasses = [];
   entries.forEach(item => {
     if (typeof item === 'object') {
@@ -3107,7 +3416,7 @@ const prepareClasses = (entries, prefix) => {
     }
   });
   return resultClasses;
-};
+}
 function addClasses() {
   const swiper = this;
   const {
@@ -3117,12 +3426,17 @@ function addClasses() {
     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
   }, {
@@ -3219,12 +3533,16 @@ var defaults = {
   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,
@@ -3327,9 +3645,7 @@ function moduleExtendParams(params, allModulesParams) {
     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)) {
@@ -3455,6 +3771,7 @@ class Swiper {
       // Indexes
       activeIndex: 0,
       realIndex: 0,
+      //
       isBeginning: true,
       isEnd: false,
       // Props
@@ -3481,9 +3798,12 @@ class Swiper {
         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,
@@ -3512,6 +3832,7 @@ class Swiper {
       swiper.init();
     }
 
+    // Return app instance
     // eslint-disable-next-line no-constructor-return
     return swiper;
   }
@@ -3543,6 +3864,16 @@ class Swiper {
   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 {
@@ -3644,15 +3975,21 @@ class Swiper {
         }
       }
     } 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;
+          }
         }
       }
     }
@@ -3665,11 +4002,14 @@ class Swiper {
       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();
@@ -3683,12 +4023,22 @@ class Swiper {
       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();
     }
@@ -3701,6 +4051,7 @@ class Swiper {
     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') {
@@ -3738,11 +4089,15 @@ class Swiper {
   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;
@@ -3753,10 +4108,12 @@ class Swiper {
     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);
@@ -3771,6 +4128,7 @@ class Swiper {
       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'
@@ -3790,6 +4148,7 @@ class Swiper {
         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);
@@ -3801,6 +4160,7 @@ class Swiper {
           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);
@@ -3821,24 +4181,42 @@ class Swiper {
     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) {
@@ -3848,12 +4226,18 @@ class Swiper {
       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;
@@ -3876,15 +4260,27 @@ class Swiper {
       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);
@@ -3894,6 +4290,8 @@ class Swiper {
       }
     }
     swiper.emit('destroy');
+
+    // Detach emitter events
     Object.keys(swiper.eventsListeners).forEach(eventName => {
       swiper.off(eventName);
     });