@gem-sdk/swiper 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/modules/a11y.min.mjs +1 -1
  2. package/modules/a11y.mjs +1 -1
  3. package/modules/pagination.min.mjs +1 -1
  4. package/modules/pagination.min.mjs.map +1 -1
  5. package/modules/pagination.mjs +20 -16
  6. package/package.json +3 -3
  7. package/shared/swiper-core.min.mjs +1 -1
  8. package/shared/swiper-core.min.mjs.map +1 -1
  9. package/shared/swiper-core.mjs +360 -51
  10. package/shared/update-swiper.min.mjs +1 -1
  11. package/shared/update-swiper.min.mjs.map +1 -1
  12. package/shared/update-swiper.mjs +1 -1
  13. package/shared/utils.min.mjs +1 -1
  14. package/shared/utils.min.mjs.map +1 -1
  15. package/shared/utils.mjs +1 -1
  16. package/swiper-bundle.css +1 -1
  17. package/swiper-bundle.js +381 -68
  18. package/swiper-bundle.min.css +1 -1
  19. package/swiper-bundle.min.js +2 -2
  20. package/swiper-bundle.min.js.map +1 -1
  21. package/swiper-bundle.min.mjs +1 -1
  22. package/swiper-bundle.mjs +1 -1
  23. package/swiper-effect-utils.min.mjs +1 -1
  24. package/swiper-effect-utils.mjs +1 -1
  25. package/swiper-element-bundle.js +383 -70
  26. package/swiper-element-bundle.min.js +2 -2
  27. package/swiper-element-bundle.min.js.map +1 -1
  28. package/swiper-element-bundle.min.mjs +1 -1
  29. package/swiper-element-bundle.mjs +1 -1
  30. package/swiper-element.d.ts +5 -0
  31. package/swiper-element.js +362 -53
  32. package/swiper-element.min.js +2 -2
  33. package/swiper-element.min.js.map +1 -1
  34. package/swiper-element.min.mjs +1 -1
  35. package/swiper-element.mjs +1 -1
  36. package/swiper-react.d.ts +5 -0
  37. package/swiper-react.mjs +1 -1
  38. package/swiper-vue.d.ts +9 -0
  39. package/swiper-vue.mjs +6 -2
  40. package/swiper.css +1 -1
  41. package/swiper.js +360 -51
  42. package/swiper.less +1 -1
  43. package/swiper.min.css +1 -1
  44. package/swiper.min.js +2 -2
  45. package/swiper.min.js.map +1 -1
  46. package/swiper.min.mjs +1 -1
  47. package/swiper.mjs +1 -1
  48. package/swiper.scss +1 -1
  49. package/types/swiper-class.d.ts +10 -0
  50. package/types/swiper-events.d.ts +5 -0
  51. package/types/swiper-options.d.ts +7 -0
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Swiper Custom Element 0.0.7
2
+ * Swiper Custom Element 0.0.8
3
3
  * Gem SDK - Swiper, Customized of swiper
4
4
  * https://swiperjs.com
5
5
  *
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Swiper Custom Element 0.0.7
2
+ * Swiper Custom Element 0.0.8
3
3
  * Gem SDK - Swiper, Customized of swiper
4
4
  * https://swiperjs.com
5
5
  *
@@ -275,6 +275,11 @@ interface SwiperContainerEventMap extends Omit<HTMLElementEventMap, 'click' | 'p
275
275
  */
276
276
  loopfix: CustomEvent<[swiper: Swiper]>;
277
277
 
278
+ /**
279
+ * Event will be fired after "loop fix dot"
280
+ */
281
+ loopfixdot: CustomEvent<[swiper: Swiper]>;
282
+
278
283
  /**
279
284
  * Event will be fired on breakpoint change
280
285
  */
package/swiper-element.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Swiper Custom Element 0.0.7
2
+ * Swiper Custom Element 0.0.8
3
3
  * Gem SDK - Swiper, Customized of swiper
4
4
  * https://swiperjs.com
5
5
  *
@@ -2000,56 +2000,63 @@
2000
2000
  if (typeof speed === 'undefined') {
2001
2001
  speed = swiper.params.speed;
2002
2002
  }
2003
- const gridEnabled = swiper.grid && swiper.params.grid && swiper.params.grid.rows > 1;
2004
2003
  let newIndex = index;
2005
2004
  if (swiper.params.loop) {
2006
- if (swiper.virtual && swiper.params.virtual.enabled) {
2007
- // eslint-disable-next-line
2008
- newIndex = newIndex + swiper.virtual.slidesBefore;
2005
+ swiper.slides;
2006
+ const totalSlides = swiper.slides.length;
2007
+ let targetSlideIndex;
2008
+ targetSlideIndex = swiper.getSlideIndexByData(newIndex);
2009
+ const cols = swiper.slides.length;
2010
+ const {
2011
+ centeredSlides
2012
+ } = swiper.params;
2013
+ let slidesPerView = swiper.params.slidesPerView;
2014
+ if (slidesPerView === 'auto') {
2015
+ slidesPerView = swiper.slidesPerViewDynamic();
2009
2016
  } else {
2010
- let targetSlideIndex;
2011
- if (gridEnabled) {
2012
- const slideIndex = newIndex * swiper.params.grid.rows;
2013
- targetSlideIndex = swiper.slides.find(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === slideIndex).column;
2014
- } else {
2015
- targetSlideIndex = swiper.getSlideIndexByData(newIndex);
2016
- }
2017
- const cols = gridEnabled ? Math.ceil(swiper.slides.length / swiper.params.grid.rows) : swiper.slides.length;
2018
- const {
2019
- centeredSlides
2020
- } = swiper.params;
2021
- let slidesPerView = swiper.params.slidesPerView;
2022
- if (slidesPerView === 'auto') {
2023
- slidesPerView = swiper.slidesPerViewDynamic();
2024
- } else {
2025
- slidesPerView = Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
2026
- if (centeredSlides && slidesPerView % 2 === 0) {
2027
- slidesPerView = slidesPerView + 1;
2028
- }
2029
- }
2030
- let needLoopFix = cols - targetSlideIndex < slidesPerView;
2031
- if (centeredSlides) {
2032
- needLoopFix = needLoopFix || targetSlideIndex < Math.ceil(slidesPerView / 2);
2033
- }
2034
- if (internal && centeredSlides && swiper.params.slidesPerView !== 'auto' && !gridEnabled) {
2035
- needLoopFix = false;
2017
+ slidesPerView = Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
2018
+ if (centeredSlides && slidesPerView % 2 === 0) {
2019
+ slidesPerView = slidesPerView + 1;
2036
2020
  }
2037
- if (needLoopFix) {
2038
- const direction = centeredSlides ? targetSlideIndex < swiper.activeIndex ? 'prev' : 'next' : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView ? 'next' : 'prev';
2039
- swiper.loopFix({
2040
- direction,
2041
- slideTo: true,
2042
- activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
2043
- slideRealIndex: direction === 'next' ? swiper.realIndex : undefined
2044
- });
2045
- }
2046
- if (gridEnabled) {
2047
- const slideIndex = newIndex * swiper.params.grid.rows;
2048
- newIndex = swiper.slides.find(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === slideIndex).column;
2021
+ }
2022
+ let needLoopFix = cols - targetSlideIndex < slidesPerView;
2023
+ if (centeredSlides) {
2024
+ needLoopFix = needLoopFix || targetSlideIndex < Math.ceil(slidesPerView / 2);
2025
+ }
2026
+ if (internal && centeredSlides && swiper.params.slidesPerView !== 'auto') {
2027
+ needLoopFix = false;
2028
+ }
2029
+ if (centeredSlides && needLoopFix) {
2030
+ const direction = centeredSlides ? targetSlideIndex < swiper.activeIndex ? 'prev' : 'next' : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView ? 'next' : 'prev';
2031
+ swiper.loopFix({
2032
+ direction,
2033
+ slideTo: true,
2034
+ activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
2035
+ slideRealIndex: direction === 'next' ? swiper.realIndex : undefined
2036
+ });
2037
+ }
2038
+ if (!centeredSlides && needLoopFix) {
2039
+ let direction;
2040
+ let nextSteps;
2041
+ let prevSteps;
2042
+ if (swiper.activeIndex < targetSlideIndex) {
2043
+ nextSteps = targetSlideIndex - swiper.activeIndex;
2044
+ prevSteps = swiper.activeIndex - (targetSlideIndex - totalSlides);
2049
2045
  } else {
2050
- newIndex = swiper.getSlideIndexByData(newIndex);
2046
+ prevSteps = swiper.activeIndex - targetSlideIndex;
2047
+ nextSteps = targetSlideIndex + totalSlides - swiper.activeIndex;
2051
2048
  }
2049
+ direction = nextSteps > prevSteps ? 'prev' : 'next';
2050
+ swiper.loopFixDot({
2051
+ direction,
2052
+ slideTo: true,
2053
+ activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
2054
+ slideRealIndex: direction === 'next' ? swiper.realIndex : undefined,
2055
+ targetSlideIndex,
2056
+ newIndex: swiper.getSlideIndexByData(newIndex)
2057
+ });
2052
2058
  }
2059
+ newIndex = swiper.getSlideIndexByData(newIndex);
2053
2060
  }
2054
2061
  requestAnimationFrame(() => {
2055
2062
  swiper.slideTo(newIndex, speed, runCallbacks, internal);
@@ -2057,6 +2064,87 @@
2057
2064
  return swiper;
2058
2065
  }
2059
2066
 
2067
+ function slideToLoopCenterSneakPeek(index, speed, runCallbacks, internal) {
2068
+ if (index === void 0) {
2069
+ index = 0;
2070
+ }
2071
+ if (runCallbacks === void 0) {
2072
+ runCallbacks = true;
2073
+ }
2074
+ if (typeof index === 'string') {
2075
+ const indexAsNumber = parseInt(index, 10);
2076
+ index = indexAsNumber;
2077
+ }
2078
+ const swiper = this;
2079
+ if (swiper.destroyed) return;
2080
+ if (typeof speed === 'undefined') {
2081
+ speed = swiper.params.speed;
2082
+ }
2083
+ let newIndex = index;
2084
+ if (swiper.params.loop) {
2085
+ swiper.slides;
2086
+ const totalSlides = swiper.slides.length;
2087
+ let targetSlideIndex;
2088
+ targetSlideIndex = swiper.getSlideIndexByData(newIndex);
2089
+ const cols = swiper.slides.length;
2090
+ const {
2091
+ centeredSlides
2092
+ } = swiper.params;
2093
+ let slidesPerView = swiper.params.slidesPerView;
2094
+ if (slidesPerView === 'auto') {
2095
+ slidesPerView = swiper.slidesPerViewDynamic();
2096
+ } else {
2097
+ slidesPerView = Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
2098
+ if (centeredSlides && slidesPerView % 2 === 0) {
2099
+ slidesPerView = slidesPerView + 1;
2100
+ }
2101
+ }
2102
+ if (internal && centeredSlides && swiper.params.slidesPerView !== 'auto') ;
2103
+ const isSneakPeekCenter = swiper.params?.isSneakPeekCenter;
2104
+ if (isSneakPeekCenter) {
2105
+ let direction;
2106
+ let nextSteps;
2107
+ let prevSteps;
2108
+ if (swiper.activeIndex < targetSlideIndex) {
2109
+ nextSteps = targetSlideIndex - swiper.activeIndex;
2110
+ prevSteps = swiper.activeIndex - (targetSlideIndex - totalSlides);
2111
+ } else {
2112
+ prevSteps = swiper.activeIndex - targetSlideIndex;
2113
+ nextSteps = targetSlideIndex + totalSlides - swiper.activeIndex;
2114
+ }
2115
+ direction = nextSteps > prevSteps ? 'prev' : 'next';
2116
+ swiper.loopFixDot({
2117
+ direction,
2118
+ slideTo: true,
2119
+ activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
2120
+ slideRealIndex: direction === 'next' ? swiper.realIndex : undefined,
2121
+ targetSlideIndex,
2122
+ newIndex: swiper.getSlideIndexByData(newIndex)
2123
+ });
2124
+ }
2125
+ newIndex = swiper.getSlideIndexByData(newIndex);
2126
+ }
2127
+ swiper.slideTo(newIndex, speed, runCallbacks, internal);
2128
+ const slides = swiper.slides;
2129
+ if (swiper.params?.isSneakPeekCenter && slides.length > 1 && swiper.activeIndex === 0) {
2130
+ const gap = Math.abs(swiper.snapGrid[1] - swiper.snapGrid[0]);
2131
+ const swiperTranslate = JSON.parse(JSON.stringify(swiper.snapGrid[1]));
2132
+
2133
+ // Move last item to first position only if active slide is the first slide
2134
+ const lastSlide = slides[slides.length - 1];
2135
+ lastSlide.swiperLoopMoveDOM = true;
2136
+ swiper.slidesEl.prepend(lastSlide);
2137
+ lastSlide.swiperLoopMoveDOM = false;
2138
+ swiper.setTransition(0);
2139
+ swiper.setTranslate(-(swiperTranslate + gap));
2140
+ swiper.recalcSlides();
2141
+ swiper.updateSlides();
2142
+ swiper.setTransition(swiper.params.speed);
2143
+ swiper.setTranslate(-swiperTranslate);
2144
+ }
2145
+ return;
2146
+ }
2147
+
2060
2148
  /* eslint no-unused-vars: "off" */
2061
2149
  function slideNext(speed, runCallbacks, internal) {
2062
2150
  if (runCallbacks === void 0) {
@@ -2081,7 +2169,7 @@
2081
2169
  if (params.loop) {
2082
2170
  if (animating && !isVirtual && params.loopPreventsSliding) return false;
2083
2171
 
2084
- // Check if loop is disabled
2172
+ // Kiểm tra xem loop bị disable không
2085
2173
  const currentSlidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(params.slidesPerView, 10));
2086
2174
  if (swiper.slides.length >= currentSlidesPerView) {
2087
2175
  swiper.loopFix({
@@ -2121,11 +2209,9 @@
2121
2209
  if (typeof speed === 'undefined') {
2122
2210
  speed = swiper.params.speed;
2123
2211
  }
2124
- const isVirtual = swiper.virtual && params.virtual.enabled;
2212
+ swiper.virtual && params.virtual.enabled;
2125
2213
  if (params.loop) {
2126
- if (animating && !isVirtual && params.loopPreventsSliding) return false;
2127
-
2128
- // Check if loop is disabled
2214
+ // Kiểm tra xem loop bị disable không
2129
2215
  const currentSlidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(params.slidesPerView, 10));
2130
2216
  if (swiper.slides.length >= currentSlidesPerView) {
2131
2217
  swiper.loopFix({
@@ -2174,7 +2260,27 @@
2174
2260
  });
2175
2261
  return true;
2176
2262
  }
2177
- return swiper.slideTo(prevIndex, speed, runCallbacks, internal);
2263
+ requestAnimationFrame(() => {
2264
+ swiper.slideTo(prevIndex, speed, runCallbacks, internal);
2265
+ const slides = swiper.slides;
2266
+ if (swiper.params?.isSneakPeekCenter && slides.length > 1 && swiper.activeIndex === 0) {
2267
+ const gap = Math.abs(swiper.snapGrid[1] - swiper.snapGrid[0]);
2268
+ const swiperTranslate = JSON.parse(JSON.stringify(swiper.snapGrid[1]));
2269
+
2270
+ // Move last item to first position only if active slide is the first slide
2271
+ const lastSlide = slides[slides.length - 1];
2272
+ lastSlide.swiperLoopMoveDOM = true;
2273
+ swiper.slidesEl.prepend(lastSlide);
2274
+ lastSlide.swiperLoopMoveDOM = false;
2275
+ swiper.setTransition(0);
2276
+ swiper.setTranslate(-(swiperTranslate + gap));
2277
+ swiper.recalcSlides();
2278
+ swiper.updateSlides();
2279
+ swiper.setTransition(swiper.params.speed);
2280
+ swiper.setTranslate(-swiperTranslate);
2281
+ }
2282
+ });
2283
+ return;
2178
2284
  }
2179
2285
 
2180
2286
  /* eslint no-unused-vars: "off" */
@@ -2263,6 +2369,7 @@
2263
2369
  var slide = {
2264
2370
  slideTo,
2265
2371
  slideToLoop,
2372
+ slideToLoopCenterSneakPeek,
2266
2373
  slideNext,
2267
2374
  slidePrev,
2268
2375
  slideReset,
@@ -2350,7 +2457,7 @@
2350
2457
  const swiper = this;
2351
2458
  if (!swiper.params.loop) return;
2352
2459
 
2353
- // Disable loop mode if the number of slides is less than slidesPerView
2460
+ // Disable loop mode nếu số slides ít hơn slidesPerView
2354
2461
  const currentSlidesPerView = swiper.params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
2355
2462
  if (swiper.slides.length < currentSlidesPerView) {
2356
2463
  console.warn('Swiper: Loop mode disabled - slides.length < slidesPerView');
@@ -2562,6 +2669,206 @@
2562
2669
  swiper.emit('loopFix');
2563
2670
  }
2564
2671
 
2672
+ function loopFixDot(_temp) {
2673
+ let {
2674
+ slideRealIndex,
2675
+ slideTo = true,
2676
+ direction,
2677
+ activeSlideIndex,
2678
+ initial,
2679
+ targetSlideIndex,
2680
+ newIndex
2681
+ } = _temp === void 0 ? {} : _temp;
2682
+ const swiper = this;
2683
+ if (!swiper.params.loop) return;
2684
+
2685
+ // Disable loop mode nếu số slides ít hơn slidesPerView
2686
+ const currentSlidesPerView = swiper.params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
2687
+ if (swiper.slides.length < currentSlidesPerView) {
2688
+ console.warn('Swiper: Loop mode disabled - slides.length < slidesPerView');
2689
+ return;
2690
+ }
2691
+ swiper.emit('beforeLoopFix');
2692
+ const {
2693
+ slides,
2694
+ allowSlidePrev,
2695
+ allowSlideNext,
2696
+ slidesEl,
2697
+ params
2698
+ } = swiper;
2699
+ const targetData = slidesEl.children[targetSlideIndex].getAttribute('data-swiper-slide-index');
2700
+ const oldActiveData = Array.from(slidesEl.children).find(el => el.classList.contains(params.slideActiveClass)).getAttribute('data-swiper-slide-index');
2701
+ const {
2702
+ centeredSlides,
2703
+ initialSlide
2704
+ } = params;
2705
+ const swiperDataOldActiveIndex = slidesEl.children[swiper.activeIndex].getAttribute('data-swiper-slide-index');
2706
+ swiper.allowSlidePrev = true;
2707
+ swiper.allowSlideNext = true;
2708
+ let slidesPerView = params.slidesPerView;
2709
+ if (slidesPerView === 'auto') {
2710
+ slidesPerView = swiper.slidesPerViewDynamic();
2711
+ } else {
2712
+ slidesPerView = Math.ceil(parseFloat(params.slidesPerView, 10));
2713
+ if (centeredSlides && slidesPerView % 2 === 0) {
2714
+ slidesPerView = slidesPerView + 1;
2715
+ }
2716
+ }
2717
+ const slidesPerGroup = params.slidesPerGroupAuto ? slidesPerView : params.slidesPerGroup;
2718
+ let loopedSlides = centeredSlides ? Math.max(slidesPerGroup, Math.ceil(slidesPerView / 2)) : slidesPerGroup;
2719
+ if (loopedSlides % slidesPerGroup !== 0) {
2720
+ loopedSlides += slidesPerGroup - loopedSlides % slidesPerGroup;
2721
+ }
2722
+ loopedSlides += params.loopAdditionalSlides;
2723
+ swiper.loopedSlides = loopedSlides;
2724
+ if (slides.length < slidesPerView + loopedSlides || swiper.params.effect === 'cards' && slides.length < slidesPerView + loopedSlides * 2) {
2725
+ 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');
2726
+ }
2727
+ const isNext = direction === 'next' || !direction;
2728
+ const isPrev = direction === 'prev' || !direction;
2729
+ let numberOfSlidesNeedClone = [];
2730
+ let slidesIndex = [];
2731
+ for (let i = 0; i < slidesEl.children.length; i++) {
2732
+ slidesIndex.push(slidesEl.children[i].getAttribute('data-swiper-slide-index'));
2733
+ }
2734
+ if (isPrev) {
2735
+ for (let i = targetSlideIndex; i < slidesEl.children.length; i++) {
2736
+ numberOfSlidesNeedClone.push(i);
2737
+ }
2738
+ } else if (isNext) {
2739
+ for (let i = 0; i < slidesPerView - (slidesEl.children.length - targetSlideIndex); i++) {
2740
+ numberOfSlidesNeedClone.push(i);
2741
+ }
2742
+ }
2743
+ const cols = slides.length;
2744
+ const isInitialOverflow = initial && cols - initialSlide < slidesPerView && !centeredSlides;
2745
+ isInitialOverflow ? initialSlide : swiper.activeIndex;
2746
+ if (typeof activeSlideIndex === 'undefined') {
2747
+ activeSlideIndex = swiper.getSlideIndex(slides.find(el => el.classList.contains(params.slideActiveClass)));
2748
+ }
2749
+
2750
+ // Tạo DocumentFragment để chứa các slide clone
2751
+ const cloneFragment = document.createDocumentFragment();
2752
+
2753
+ // Clone các slide theo numberOfSlidesNeedClone (đã đảo ngược) và thêm vào fragment
2754
+ (isNext ? numberOfSlidesNeedClone : numberOfSlidesNeedClone.reverse()).forEach(index => {
2755
+ if (slides[index]) {
2756
+ const originalSlide = slides[index];
2757
+ const clonedSlide = originalSlide.cloneNode(true);
2758
+
2759
+ // Đánh dấu slide clone
2760
+ clonedSlide.setAttribute('data-swiper-clone', 'true');
2761
+ clonedSlide.classList.add('swiper-slide-clone');
2762
+
2763
+ // Thêm clone vào fragment
2764
+ cloneFragment.appendChild(clonedSlide);
2765
+ }
2766
+ });
2767
+ if (isPrev) {
2768
+ numberOfSlidesNeedClone.forEach(index => {
2769
+ const originalSlide = slides[index];
2770
+ originalSlide.swiperLoopMoveDOM = true;
2771
+ slidesEl.prepend(originalSlide);
2772
+ originalSlide.swiperLoopMoveDOM = false;
2773
+ });
2774
+ }
2775
+ if (isNext) {
2776
+ numberOfSlidesNeedClone.forEach(index => {
2777
+ const originalSlide = slides[index];
2778
+ originalSlide.swiperLoopMoveDOM = true;
2779
+ slidesEl.append(originalSlide);
2780
+ originalSlide.swiperLoopMoveDOM = false;
2781
+ });
2782
+ }
2783
+
2784
+ // Sắp xếp cloneFragment theo data-swiper-slide-index tăng dần
2785
+ const clonedSlides = Array.from(cloneFragment.children);
2786
+ clonedSlides.sort((a, b) => {
2787
+ const indexA = parseInt(a.getAttribute('data-swiper-slide-index')) || 0;
2788
+ const indexB = parseInt(b.getAttribute('data-swiper-slide-index')) || 0;
2789
+ return indexA - indexB;
2790
+ });
2791
+
2792
+ // Xóa tất cả children cũ và thêm lại theo thứ tự đã sắp xếp
2793
+ cloneFragment.innerHTML = '';
2794
+ clonedSlides.forEach(slide => {
2795
+ cloneFragment.appendChild(slide);
2796
+ });
2797
+
2798
+ // Thêm fragment vào vị trí phù hợp
2799
+ if (isPrev) {
2800
+ // Nếu là prev, thêm fragment vào cuối slidesEl
2801
+ slidesEl.appendChild(cloneFragment);
2802
+ } else if (isNext) {
2803
+ // Nếu là next, thêm fragment vào đầu slidesEl
2804
+ slidesEl.insertBefore(cloneFragment, slidesEl.firstChild);
2805
+ }
2806
+ swiper.recalcSlides();
2807
+ swiper.updateSlides();
2808
+
2809
+ // Tìm slide có data-swiper-slide-index tương ứng
2810
+ let oldActiveIndex = null;
2811
+ for (let i = 0; i < slidesEl.children.length; i++) {
2812
+ const child = slidesEl.children[i];
2813
+ if (child.getAttribute('data-swiper-slide-index') === swiperDataOldActiveIndex) {
2814
+ oldActiveIndex = i;
2815
+ break;
2816
+ }
2817
+ }
2818
+ if (slideTo && oldActiveIndex !== swiper.activeIndex) {
2819
+ swiper.slideTo(oldActiveIndex, 0);
2820
+ }
2821
+
2822
+ // Tìm vị trí slide cũ sau khi remove clone để set lại translate tạo hiệu ứng animate
2823
+ const skip = Math.min(swiper.params.slidesPerGroupSkip, newIndex);
2824
+ let snapIndex = skip + Math.floor((newIndex - skip) / swiper.params.slidesPerGroup);
2825
+ if (snapIndex >= swiper.snapGrid.length) snapIndex = swiper.snapGrid.length - 1;
2826
+ const translate = -swiper.snapGrid[snapIndex];
2827
+ if (translate === swiper.translate) {
2828
+ let oldActiveIndexAfterRemoveClone;
2829
+ for (let i = 0; i < slidesEl.children.length; i++) {
2830
+ const child = slidesEl.children[i];
2831
+ if (child.getAttribute('data-swiper-slide-index') === swiperDataOldActiveIndex) {
2832
+ oldActiveIndexAfterRemoveClone = i;
2833
+ break;
2834
+ }
2835
+ }
2836
+ const skip = Math.min(swiper.params.slidesPerGroupSkip, oldActiveIndexAfterRemoveClone);
2837
+ let snapIndex = skip + Math.floor((oldActiveIndexAfterRemoveClone - skip) / swiper.params.slidesPerGroup);
2838
+ if (snapIndex >= swiper.snapGrid.length) snapIndex = swiper.snapGrid.length - 1;
2839
+ const oldTranslate = -swiper.snapGrid[snapIndex];
2840
+ let updateTranslate;
2841
+ if (oldTranslate === swiper.translate) {
2842
+ updateTranslate = swiper.snapGrid[snapIndex > 0 ? snapIndex - 1 : swiper.snapGrid.length - 1];
2843
+ } else {
2844
+ updateTranslate = oldTranslate;
2845
+ }
2846
+ swiper.setTranslate(updateTranslate);
2847
+ }
2848
+ // Remove slide clone ra khỏi slidesEl sau khi slideTo hoàn thành
2849
+ const cloneSlides = slidesEl.querySelectorAll('[data-swiper-clone="true"]');
2850
+ cloneSlides.forEach(cloneSlide => {
2851
+ if (cloneSlide.parentNode) {
2852
+ cloneSlide.parentNode.removeChild(cloneSlide);
2853
+ }
2854
+ });
2855
+ swiper.recalcSlides();
2856
+ swiper.updateSlides();
2857
+ const targetDataIndex = Array.from(slidesEl.children).findIndex(el => el.getAttribute('data-swiper-slide-index') * 1 === targetData * 1);
2858
+ const oldDataIndex = Array.from(slidesEl.children).findIndex(el => el.getAttribute('data-swiper-slide-index') * 1 === oldActiveData * 1);
2859
+ const snapIndexNew = skip + Math.floor((targetDataIndex - skip) / swiper.params.slidesPerGroup);
2860
+ const snapIndexOld = skip + Math.floor((oldDataIndex - skip) / swiper.params.slidesPerGroup);
2861
+ if (slideTo && snapIndexNew === targetDataIndex) {
2862
+ const translateOld = -swiper.snapGrid[snapIndexOld > swiper.snapGrid.length - 1 ? snapIndexNew - 1 > swiper.snapGrid.length - 1 ? 0 : snapIndexNew - 1 : snapIndexOld];
2863
+ swiper.setTranslate(translateOld);
2864
+ }
2865
+ swiper.recalcSlides();
2866
+ swiper.updateSlides();
2867
+ swiper.allowSlidePrev = allowSlidePrev;
2868
+ swiper.allowSlideNext = allowSlideNext;
2869
+ swiper.emit('loopFixDot');
2870
+ }
2871
+
2565
2872
  function loopDestroy() {
2566
2873
  const swiper = this;
2567
2874
  const {
@@ -2588,6 +2895,7 @@
2588
2895
  var loop = {
2589
2896
  loopCreate,
2590
2897
  loopFix,
2898
+ loopFixDot,
2591
2899
  loopDestroy
2592
2900
  };
2593
2901
 
@@ -3723,6 +4031,7 @@
3723
4031
  loopAddBlankSlides: true,
3724
4032
  loopAdditionalSlides: 0,
3725
4033
  loopPreventsSliding: true,
4034
+ isSneakPeekCenter: false,
3726
4035
  // rewind
3727
4036
  rewind: false,
3728
4037
  // Swiping/no swiping
@@ -4426,7 +4735,7 @@
4426
4735
  Swiper.use([Resize, Observer]);
4427
4736
 
4428
4737
  /* underscore in name -> watch for changes */
4429
- 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',
4738
+ 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',
4430
4739
  // modules
4431
4740
  'a11y', '_autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom', 'control'];
4432
4741
 
@@ -4751,7 +5060,7 @@
4751
5060
  }
4752
5061
 
4753
5062
  /**
4754
- * Swiper Custom Element 0.0.7
5063
+ * Swiper Custom Element 0.0.8
4755
5064
  * Gem SDK - Swiper, Customized of swiper
4756
5065
  * https://swiperjs.com
4757
5066
  *