@gem-sdk/swiper 0.0.7 → 0.0.8

package/swiper-bundle.min.mjs

@@ -1,5 +1,5 @@
 /**
- * Swiper 0.0.7
+ * Swiper 0.0.8
  * Gem SDK - Swiper, Customized of swiper
  * https://swiperjs.com
  *

package/swiper-bundle.mjs

@@ -1,5 +1,5 @@
 /**
- * Swiper 0.0.7
+ * Swiper 0.0.8
  * Gem SDK - Swiper, Customized of swiper
  * https://swiperjs.com
  *

package/swiper-effect-utils.min.mjs

@@ -1,5 +1,5 @@
 /**
- * Swiper 0.0.7
+ * Swiper 0.0.8
  * Gem SDK - Swiper, Customized of swiper
  * https://swiperjs.com
  *

package/swiper-effect-utils.mjs

@@ -1,5 +1,5 @@
 /**
- * Swiper 0.0.7
+ * Swiper 0.0.8
  * Gem SDK - Swiper, Customized of swiper
  * https://swiperjs.com
  *

package/swiper-element-bundle.js

@@ -1,5 +1,5 @@
 /**
- * Swiper Custom Element 0.0.7
+ * Swiper Custom Element 0.0.8
  * Gem SDK - Swiper, Customized of swiper
  * https://swiperjs.com
  *
@@ -2038,56 +2038,63 @@
     if (typeof speed === 'undefined') {
       speed = swiper.params.speed;
     }
-    const gridEnabled = swiper.grid && swiper.params.grid && swiper.params.grid.rows > 1;
     let newIndex = index;
     if (swiper.params.loop) {
-      if (swiper.virtual && swiper.params.virtual.enabled) {
-        // eslint-disable-next-line
-        newIndex = newIndex + swiper.virtual.slidesBefore;
+      swiper.slides;
+      const totalSlides = swiper.slides.length;
+      let targetSlideIndex;
+      targetSlideIndex = swiper.getSlideIndexByData(newIndex);
+      const cols = swiper.slides.length;
+      const {
+        centeredSlides
+      } = swiper.params;
+      let slidesPerView = swiper.params.slidesPerView;
+      if (slidesPerView === 'auto') {
+        slidesPerView = swiper.slidesPerViewDynamic();
       } else {
-        let targetSlideIndex;
-        if (gridEnabled) {
-          const slideIndex = newIndex * swiper.params.grid.rows;
-          targetSlideIndex = swiper.slides.find(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === slideIndex).column;
-        } else {
-          targetSlideIndex = swiper.getSlideIndexByData(newIndex);
-        }
-        const cols = gridEnabled ? Math.ceil(swiper.slides.length / swiper.params.grid.rows) : swiper.slides.length;
-        const {
-          centeredSlides
-        } = swiper.params;
-        let slidesPerView = swiper.params.slidesPerView;
-        if (slidesPerView === 'auto') {
-          slidesPerView = swiper.slidesPerViewDynamic();
-        } else {
-          slidesPerView = Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
-          if (centeredSlides && slidesPerView % 2 === 0) {
-            slidesPerView = slidesPerView + 1;
-          }
-        }
-        let needLoopFix = cols - targetSlideIndex < slidesPerView;
-        if (centeredSlides) {
-          needLoopFix = needLoopFix || targetSlideIndex < Math.ceil(slidesPerView / 2);
-        }
-        if (internal && centeredSlides && swiper.params.slidesPerView !== 'auto' && !gridEnabled) {
-          needLoopFix = false;
-        }
-        if (needLoopFix) {
-          const direction = centeredSlides ? targetSlideIndex < swiper.activeIndex ? 'prev' : 'next' : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView ? 'next' : 'prev';
-          swiper.loopFix({
-            direction,
-            slideTo: true,
-            activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
-            slideRealIndex: direction === 'next' ? swiper.realIndex : undefined
-          });
+        slidesPerView = Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
+        if (centeredSlides && slidesPerView % 2 === 0) {
+          slidesPerView = slidesPerView + 1;
         }
-        if (gridEnabled) {
-          const slideIndex = newIndex * swiper.params.grid.rows;
-          newIndex = swiper.slides.find(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === slideIndex).column;
+      }
+      let needLoopFix = cols - targetSlideIndex < slidesPerView;
+      if (centeredSlides) {
+        needLoopFix = needLoopFix || targetSlideIndex < Math.ceil(slidesPerView / 2);
+      }
+      if (internal && centeredSlides && swiper.params.slidesPerView !== 'auto') {
+        needLoopFix = false;
+      }
+      if (centeredSlides && needLoopFix) {
+        const direction = centeredSlides ? targetSlideIndex < swiper.activeIndex ? 'prev' : 'next' : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView ? 'next' : 'prev';
+        swiper.loopFix({
+          direction,
+          slideTo: true,
+          activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
+          slideRealIndex: direction === 'next' ? swiper.realIndex : undefined
+        });
+      }
+      if (!centeredSlides && needLoopFix) {
+        let direction;
+        let nextSteps;
+        let prevSteps;
+        if (swiper.activeIndex < targetSlideIndex) {
+          nextSteps = targetSlideIndex - swiper.activeIndex;
+          prevSteps = swiper.activeIndex - (targetSlideIndex - totalSlides);
         } else {
-          newIndex = swiper.getSlideIndexByData(newIndex);
-        }
+          prevSteps = swiper.activeIndex - targetSlideIndex;
+          nextSteps = targetSlideIndex + totalSlides - swiper.activeIndex;
+        }
+        direction = nextSteps > prevSteps ? 'prev' : 'next';
+        swiper.loopFixDot({
+          direction,
+          slideTo: true,
+          activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
+          slideRealIndex: direction === 'next' ? swiper.realIndex : undefined,
+          targetSlideIndex,
+          newIndex: swiper.getSlideIndexByData(newIndex)
+        });
       }
+      newIndex = swiper.getSlideIndexByData(newIndex);
     }
     requestAnimationFrame(() => {
       swiper.slideTo(newIndex, speed, runCallbacks, internal);
@@ -2095,6 +2102,87 @@
     return swiper;
   }
 
+  function slideToLoopCenterSneakPeek(index, speed, runCallbacks, internal) {
+    if (index === void 0) {
+      index = 0;
+    }
+    if (runCallbacks === void 0) {
+      runCallbacks = true;
+    }
+    if (typeof index === 'string') {
+      const indexAsNumber = parseInt(index, 10);
+      index = indexAsNumber;
+    }
+    const swiper = this;
+    if (swiper.destroyed) return;
+    if (typeof speed === 'undefined') {
+      speed = swiper.params.speed;
+    }
+    let newIndex = index;
+    if (swiper.params.loop) {
+      swiper.slides;
+      const totalSlides = swiper.slides.length;
+      let targetSlideIndex;
+      targetSlideIndex = swiper.getSlideIndexByData(newIndex);
+      const cols = swiper.slides.length;
+      const {
+        centeredSlides
+      } = swiper.params;
+      let slidesPerView = swiper.params.slidesPerView;
+      if (slidesPerView === 'auto') {
+        slidesPerView = swiper.slidesPerViewDynamic();
+      } else {
+        slidesPerView = Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
+        if (centeredSlides && slidesPerView % 2 === 0) {
+          slidesPerView = slidesPerView + 1;
+        }
+      }
+      if (internal && centeredSlides && swiper.params.slidesPerView !== 'auto') ;
+      const isSneakPeekCenter = swiper.params?.isSneakPeekCenter;
+      if (isSneakPeekCenter) {
+        let direction;
+        let nextSteps;
+        let prevSteps;
+        if (swiper.activeIndex < targetSlideIndex) {
+          nextSteps = targetSlideIndex - swiper.activeIndex;
+          prevSteps = swiper.activeIndex - (targetSlideIndex - totalSlides);
+        } else {
+          prevSteps = swiper.activeIndex - targetSlideIndex;
+          nextSteps = targetSlideIndex + totalSlides - swiper.activeIndex;
+        }
+        direction = nextSteps > prevSteps ? 'prev' : 'next';
+        swiper.loopFixDot({
+          direction,
+          slideTo: true,
+          activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
+          slideRealIndex: direction === 'next' ? swiper.realIndex : undefined,
+          targetSlideIndex,
+          newIndex: swiper.getSlideIndexByData(newIndex)
+        });
+      }
+      newIndex = swiper.getSlideIndexByData(newIndex);
+    }
+    swiper.slideTo(newIndex, speed, runCallbacks, internal);
+    const slides = swiper.slides;
+    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);
+      lastSlide.swiperLoopMoveDOM = false;
+      swiper.setTransition(0);
+      swiper.setTranslate(-(swiperTranslate + gap));
+      swiper.recalcSlides();
+      swiper.updateSlides();
+      swiper.setTransition(swiper.params.speed);
+      swiper.setTranslate(-swiperTranslate);
+    }
+    return;
+  }
+
   /* eslint no-unused-vars: "off" */
   function slideNext(speed, runCallbacks, internal) {
     if (runCallbacks === void 0) {
@@ -2119,7 +2207,7 @@
     if (params.loop) {
       if (animating && !isVirtual && params.loopPreventsSliding) return false;
 
-      // Check if loop is disabled
+      // 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({
@@ -2159,11 +2247,9 @@
     if (typeof speed === 'undefined') {
       speed = swiper.params.speed;
     }
-    const isVirtual = swiper.virtual && params.virtual.enabled;
+    swiper.virtual && params.virtual.enabled;
     if (params.loop) {
-      if (animating && !isVirtual && params.loopPreventsSliding) return false;
-
-      // Check if loop is disabled
+      // 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({
@@ -2212,7 +2298,27 @@
       });
       return true;
     }
-    return swiper.slideTo(prevIndex, speed, runCallbacks, internal);
+    requestAnimationFrame(() => {
+      swiper.slideTo(prevIndex, speed, runCallbacks, internal);
+      const slides = swiper.slides;
+      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);
+        lastSlide.swiperLoopMoveDOM = false;
+        swiper.setTransition(0);
+        swiper.setTranslate(-(swiperTranslate + gap));
+        swiper.recalcSlides();
+        swiper.updateSlides();
+        swiper.setTransition(swiper.params.speed);
+        swiper.setTranslate(-swiperTranslate);
+      }
+    });
+    return;
   }
 
   /* eslint no-unused-vars: "off" */
@@ -2301,6 +2407,7 @@
   var slide = {
     slideTo,
     slideToLoop,
+    slideToLoopCenterSneakPeek,
     slideNext,
     slidePrev,
     slideReset,
@@ -2388,7 +2495,7 @@
     const swiper = this;
     if (!swiper.params.loop) return;
 
-    // Disable loop mode if the number of slides is less 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');
@@ -2600,6 +2707,206 @@
     swiper.emit('loopFix');
   }
 
+  function loopFixDot(_temp) {
+    let {
+      slideRealIndex,
+      slideTo = true,
+      direction,
+      activeSlideIndex,
+      initial,
+      targetSlideIndex,
+      newIndex
+    } = _temp === void 0 ? {} : _temp;
+    const swiper = this;
+    if (!swiper.params.loop) return;
+
+    // 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');
+      return;
+    }
+    swiper.emit('beforeLoopFix');
+    const {
+      slides,
+      allowSlidePrev,
+      allowSlideNext,
+      slidesEl,
+      params
+    } = swiper;
+    const targetData = slidesEl.children[targetSlideIndex].getAttribute('data-swiper-slide-index');
+    const oldActiveData = Array.from(slidesEl.children).find(el => el.classList.contains(params.slideActiveClass)).getAttribute('data-swiper-slide-index');
+    const {
+      centeredSlides,
+      initialSlide
+    } = params;
+    const swiperDataOldActiveIndex = slidesEl.children[swiper.activeIndex].getAttribute('data-swiper-slide-index');
+    swiper.allowSlidePrev = true;
+    swiper.allowSlideNext = true;
+    let slidesPerView = params.slidesPerView;
+    if (slidesPerView === 'auto') {
+      slidesPerView = swiper.slidesPerViewDynamic();
+    } else {
+      slidesPerView = Math.ceil(parseFloat(params.slidesPerView, 10));
+      if (centeredSlides && slidesPerView % 2 === 0) {
+        slidesPerView = slidesPerView + 1;
+      }
+    }
+    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 || 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;
+    const isPrev = direction === 'prev' || !direction;
+    let numberOfSlidesNeedClone = [];
+    let slidesIndex = [];
+    for (let i = 0; i < slidesEl.children.length; i++) {
+      slidesIndex.push(slidesEl.children[i].getAttribute('data-swiper-slide-index'));
+    }
+    if (isPrev) {
+      for (let i = targetSlideIndex; i < slidesEl.children.length; i++) {
+        numberOfSlidesNeedClone.push(i);
+      }
+    } else if (isNext) {
+      for (let i = 0; i < slidesPerView - (slidesEl.children.length - targetSlideIndex); i++) {
+        numberOfSlidesNeedClone.push(i);
+      }
+    }
+    const cols = slides.length;
+    const isInitialOverflow = initial && cols - initialSlide < slidesPerView && !centeredSlides;
+    isInitialOverflow ? initialSlide : swiper.activeIndex;
+    if (typeof activeSlideIndex === 'undefined') {
+      activeSlideIndex = swiper.getSlideIndex(slides.find(el => el.classList.contains(params.slideActiveClass)));
+    }
+
+    // Tạo DocumentFragment để chứa các slide clone
+    const cloneFragment = document.createDocumentFragment();
+
+    // 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);
+      }
+    });
+    if (isPrev) {
+      numberOfSlidesNeedClone.forEach(index => {
+        const originalSlide = slides[index];
+        originalSlide.swiperLoopMoveDOM = true;
+        slidesEl.prepend(originalSlide);
+        originalSlide.swiperLoopMoveDOM = false;
+      });
+    }
+    if (isNext) {
+      numberOfSlidesNeedClone.forEach(index => {
+        const originalSlide = slides[index];
+        originalSlide.swiperLoopMoveDOM = true;
+        slidesEl.append(originalSlide);
+        originalSlide.swiperLoopMoveDOM = false;
+      });
+    }
+
+    // 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);
+    });
+
+    // 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();
+
+    // 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];
+      if (child.getAttribute('data-swiper-slide-index') === swiperDataOldActiveIndex) {
+        oldActiveIndex = i;
+        break;
+      }
+    }
+    if (slideTo && oldActiveIndex !== swiper.activeIndex) {
+      swiper.slideTo(oldActiveIndex, 0);
+    }
+
+    // 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;
+    const translate = -swiper.snapGrid[snapIndex];
+    if (translate === swiper.translate) {
+      let oldActiveIndexAfterRemoveClone;
+      for (let i = 0; i < slidesEl.children.length; i++) {
+        const child = slidesEl.children[i];
+        if (child.getAttribute('data-swiper-slide-index') === swiperDataOldActiveIndex) {
+          oldActiveIndexAfterRemoveClone = i;
+          break;
+        }
+      }
+      const skip = Math.min(swiper.params.slidesPerGroupSkip, oldActiveIndexAfterRemoveClone);
+      let snapIndex = skip + Math.floor((oldActiveIndexAfterRemoveClone - skip) / swiper.params.slidesPerGroup);
+      if (snapIndex >= swiper.snapGrid.length) snapIndex = swiper.snapGrid.length - 1;
+      const oldTranslate = -swiper.snapGrid[snapIndex];
+      let updateTranslate;
+      if (oldTranslate === swiper.translate) {
+        updateTranslate = swiper.snapGrid[snapIndex > 0 ? snapIndex - 1 : swiper.snapGrid.length - 1];
+      } else {
+        updateTranslate = oldTranslate;
+      }
+      swiper.setTranslate(updateTranslate);
+    }
+    // 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) {
+        cloneSlide.parentNode.removeChild(cloneSlide);
+      }
+    });
+    swiper.recalcSlides();
+    swiper.updateSlides();
+    const targetDataIndex = Array.from(slidesEl.children).findIndex(el => el.getAttribute('data-swiper-slide-index') * 1 === targetData * 1);
+    const oldDataIndex = Array.from(slidesEl.children).findIndex(el => el.getAttribute('data-swiper-slide-index') * 1 === oldActiveData * 1);
+    const snapIndexNew = skip + Math.floor((targetDataIndex - skip) / swiper.params.slidesPerGroup);
+    const snapIndexOld = skip + Math.floor((oldDataIndex - skip) / swiper.params.slidesPerGroup);
+    if (slideTo && snapIndexNew === targetDataIndex) {
+      const translateOld = -swiper.snapGrid[snapIndexOld > swiper.snapGrid.length - 1 ? snapIndexNew - 1 > swiper.snapGrid.length - 1 ? 0 : snapIndexNew - 1 : snapIndexOld];
+      swiper.setTranslate(translateOld);
+    }
+    swiper.recalcSlides();
+    swiper.updateSlides();
+    swiper.allowSlidePrev = allowSlidePrev;
+    swiper.allowSlideNext = allowSlideNext;
+    swiper.emit('loopFixDot');
+  }
+
   function loopDestroy() {
     const swiper = this;
     const {
@@ -2626,6 +2933,7 @@
   var loop = {
     loopCreate,
     loopFix,
+    loopFixDot,
     loopDestroy
   };
 
@@ -3761,6 +4069,7 @@
     loopAddBlankSlides: true,
     loopAdditionalSlides: 0,
     loopPreventsSliding: true,
+    isSneakPeekCenter: false,
     // rewind
     rewind: false,
     // Swiping/no swiping
@@ -5597,16 +5906,6 @@
         }
       }
     }
-    function getMoveDirection(prevIndex, nextIndex, length) {
-      prevIndex = prevIndex % length;
-      nextIndex = nextIndex % length;
-      if (nextIndex === prevIndex + 1) {
-        return 'next';
-      } else if (nextIndex === prevIndex - 1) {
-        return 'previous';
-      }
-      return;
-    }
     function onBulletClick(e) {
       const bulletEl = e.target.closest(classesToSelector(swiper.params.pagination.bulletClass));
       if (!bulletEl) {
@@ -5615,26 +5914,40 @@
       e.preventDefault();
       const index = elementIndex(bulletEl) * swiper.params.slidesPerGroup;
       if (swiper.params.loop) {
-        // Check if loop is disabled
+        // Kiểm tra xem loop có bị disable không
         const currentSlidesPerView = swiper.params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
         if (swiper.slides.length < currentSlidesPerView) {
-          // Loop is disabled, use slideTo directly
+          // Loop bị disable, sử dụng slideTo trực tiếp
           swiper.slideTo(index);
           return;
         }
         if (swiper.realIndex === index) return;
-        const moveDirection = getMoveDirection(swiper.realIndex, index, swiper.slides.length);
-        if (moveDirection === 'next') {
+        if (index === swiper.realIndex + 1 || index === 0 && swiper.realIndex === swiper.slides.length - 1) {
           swiper.slideNext();
-        } else if (moveDirection === 'previous') {
+        } else if (index === swiper.realIndex - 1 || index === swiper.slides.length - 1 && swiper.realIndex === 0) {
           swiper.slidePrev();
+        }
+        // const moveDirection = getMoveDirection(swiper.realIndex, index, swiper.slides.length);
+        if (swiper.params.isSneakPeekCenter) {
+          swiper.slideToLoopCenterSneakPeek(index);
         } else {
           swiper.slideToLoop(index);
         }
+
+        // if (moveDirection === 'next') {
+        //   swiper.slideNext();
+        // } else if (moveDirection === 'previous') {
+        //   swiper.slidePrev();
+        // } else {
+        //   swiper.slideToLoop(index);
+        // }
       } else {
         swiper.slideTo(index);
       }
     }
+
+    // Export function để sử dụng ở ngoài
+    swiper.pagination.onBulletClick = onBulletClick;
     function update() {
       // Render || Update Pagination bullets/items
       const rtl = swiper.rtl;
@@ -9849,7 +10162,7 @@
   }
 
   /**
-   * Swiper 0.0.7
+   * Swiper 0.0.8
    * Gem SDK - Swiper, Customized of swiper
    * https://swiperjs.com
    *
@@ -9866,7 +10179,7 @@
   Swiper.use(modules);
 
   /* underscore in name -> watch for changes */
-  const paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'swiperElementNodeName', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', 'breakpointsBase', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'slideBlankClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
+  const paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'swiperElementNodeName', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', 'breakpointsBase', '_spaceBetween', '_isSneakPeekCenter', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'slideBlankClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
   // modules
   'a11y', '_autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom', 'control'];
 
@@ -10191,7 +10504,7 @@
   }
 
   /**
-   * Swiper Custom Element 0.0.7
+   * Swiper Custom Element 0.0.8
    * Gem SDK - Swiper, Customized of swiper
    * https://swiperjs.com
    *