@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.
- package/modules/a11y.min.mjs +1 -1
- package/modules/a11y.mjs +1 -1
- package/modules/pagination.min.mjs +1 -1
- package/modules/pagination.min.mjs.map +1 -1
- package/modules/pagination.mjs +20 -16
- package/package.json +3 -3
- package/shared/swiper-core.min.mjs +1 -1
- package/shared/swiper-core.min.mjs.map +1 -1
- package/shared/swiper-core.mjs +360 -51
- package/shared/update-swiper.min.mjs +1 -1
- package/shared/update-swiper.min.mjs.map +1 -1
- package/shared/update-swiper.mjs +1 -1
- package/shared/utils.min.mjs +1 -1
- package/shared/utils.min.mjs.map +1 -1
- package/shared/utils.mjs +1 -1
- package/swiper-bundle.css +1 -1
- package/swiper-bundle.js +381 -68
- package/swiper-bundle.min.css +1 -1
- package/swiper-bundle.min.js +2 -2
- package/swiper-bundle.min.js.map +1 -1
- package/swiper-bundle.min.mjs +1 -1
- package/swiper-bundle.mjs +1 -1
- package/swiper-effect-utils.min.mjs +1 -1
- package/swiper-effect-utils.mjs +1 -1
- package/swiper-element-bundle.js +383 -70
- package/swiper-element-bundle.min.js +2 -2
- package/swiper-element-bundle.min.js.map +1 -1
- package/swiper-element-bundle.min.mjs +1 -1
- package/swiper-element-bundle.mjs +1 -1
- package/swiper-element.d.ts +5 -0
- package/swiper-element.js +362 -53
- package/swiper-element.min.js +2 -2
- package/swiper-element.min.js.map +1 -1
- package/swiper-element.min.mjs +1 -1
- package/swiper-element.mjs +1 -1
- package/swiper-react.d.ts +5 -0
- package/swiper-react.mjs +1 -1
- package/swiper-vue.d.ts +9 -0
- package/swiper-vue.mjs +6 -2
- package/swiper.css +1 -1
- package/swiper.js +360 -51
- package/swiper.less +1 -1
- package/swiper.min.css +1 -1
- package/swiper.min.js +2 -2
- package/swiper.min.js.map +1 -1
- package/swiper.min.mjs +1 -1
- package/swiper.mjs +1 -1
- package/swiper.scss +1 -1
- package/types/swiper-class.d.ts +10 -0
- package/types/swiper-events.d.ts +5 -0
- package/types/swiper-options.d.ts +7 -0
package/swiper-element.d.ts
CHANGED
|
@@ -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.
|
|
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
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
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
|
-
|
|
2011
|
-
if (
|
|
2012
|
-
|
|
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
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
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
|
-
|
|
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
|
-
//
|
|
2172
|
+
// Kiểm tra xem loop có 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
|
-
|
|
2212
|
+
swiper.virtual && params.virtual.enabled;
|
|
2125
2213
|
if (params.loop) {
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
// Check if loop is disabled
|
|
2214
|
+
// Kiểm tra xem loop có 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
|
-
|
|
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
|
|
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.
|
|
5063
|
+
* Swiper Custom Element 0.0.8
|
|
4755
5064
|
* Gem SDK - Swiper, Customized of swiper
|
|
4756
5065
|
* https://swiperjs.com
|
|
4757
5066
|
*
|