Skip to content

Commit 575bc84

Browse files
nolimits4webnolimits4web
committed
feat(core): new parameters and methods to enable/disable Swiper dynamically
fixes #4356 fixes #4311
1 parent c201408 commit 575bc84

File tree

18 files changed

+185
-77
lines changed

18 files changed

+185
-77
lines changed

‎src/components/core/breakpoints/setBreakpoint.js‎

Lines changed: 66 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,72 +9,82 @@ export default function setBreakpoint() {
99
// Get breakpoint for window width and update parameters
1010
const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);
1111

12-
if (breakpoint && swiper.currentBreakpoint !== breakpoint) {
13-
const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
14-
if (breakpointOnlyParams) {
15-
[
16-
'slidesPerView',
17-
'spaceBetween',
18-
'slidesPerGroup',
19-
'slidesPerGroupSkip',
20-
'slidesPerColumn',
21-
].forEach((param) => {
22-
const paramValue = breakpointOnlyParams[param];
23-
if (typeof paramValue === 'undefined') return;
24-
if (param === 'slidesPerView' && (paramValue === 'AUTO' || paramValue === 'auto')) {
25-
breakpointOnlyParams[param] = 'auto';
26-
} else if (param === 'slidesPerView') {
27-
breakpointOnlyParams[param] = parseFloat(paramValue);
28-
} else {
29-
breakpointOnlyParams[param] = parseInt(paramValue, 10);
30-
}
31-
});
32-
}
12+
if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;
3313

34-
const breakpointParams = breakpointOnlyParams || swiper.originalParams;
35-
const wasMultiRow = params.slidesPerColumn > 1;
36-
const isMultiRow = breakpointParams.slidesPerColumn > 1;
37-
if (wasMultiRow && !isMultiRow) {
38-
$el.removeClass(
39-
`${params.containerModifierClass}multirow ${params.containerModifierClass}multirow-column`,
40-
);
41-
swiper.emitContainerClasses();
42-
} else if (!wasMultiRow && isMultiRow) {
43-
$el.addClass(`${params.containerModifierClass}multirow`);
44-
if (breakpointParams.slidesPerColumnFill === 'column') {
45-
$el.addClass(`${params.containerModifierClass}multirow-column`);
14+
const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
15+
if (breakpointOnlyParams) {
16+
[
17+
'slidesPerView',
18+
'spaceBetween',
19+
'slidesPerGroup',
20+
'slidesPerGroupSkip',
21+
'slidesPerColumn',
22+
].forEach((param) => {
23+
const paramValue = breakpointOnlyParams[param];
24+
if (typeof paramValue === 'undefined') return;
25+
if (param === 'slidesPerView' && (paramValue === 'AUTO' || paramValue === 'auto')) {
26+
breakpointOnlyParams[param] = 'auto';
27+
} else if (param === 'slidesPerView') {
28+
breakpointOnlyParams[param] = parseFloat(paramValue);
29+
} else {
30+
breakpointOnlyParams[param] = parseInt(paramValue, 10);
4631
}
47-
swiper.emitContainerClasses();
48-
}
32+
});
33+
}
4934

50-
const directionChanged =
51-
breakpointParams.direction && breakpointParams.direction !== params.direction;
52-
const needsReLoop =
53-
params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
35+
const breakpointParams = breakpointOnlyParams || swiper.originalParams;
36+
const wasMultiRow = params.slidesPerColumn > 1;
37+
const isMultiRow = breakpointParams.slidesPerColumn > 1;
5438

55-
if (directionChanged && initialized) {
56-
swiper.changeDirection();
39+
const wasEnabled = params.enabled;
40+
const isEnabled = breakpointParams.enabled;
41+
42+
if (wasMultiRow && !isMultiRow) {
43+
$el.removeClass(
44+
`${params.containerModifierClass}multirow ${params.containerModifierClass}multirow-column`,
45+
);
46+
swiper.emitContainerClasses();
47+
} else if (!wasMultiRow && isMultiRow) {
48+
$el.addClass(`${params.containerModifierClass}multirow`);
49+
if (breakpointParams.slidesPerColumnFill === 'column') {
50+
$el.addClass(`${params.containerModifierClass}multirow-column`);
5751
}
52+
swiper.emitContainerClasses();
53+
}
5854

59-
extend(swiper.params, breakpointParams);
55+
const directionChanged =
56+
breakpointParams.direction && breakpointParams.direction !== params.direction;
57+
const needsReLoop =
58+
params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
6059

61-
extend(swiper, {
62-
allowTouchMove: swiper.params.allowTouchMove,
63-
allowSlideNext: swiper.params.allowSlideNext,
64-
allowSlidePrev: swiper.params.allowSlidePrev,
65-
});
60+
if (directionChanged && initialized) {
61+
swiper.changeDirection();
62+
}
6663

67-
swiper.currentBreakpoint = breakpoint;
64+
extend(swiper.params, breakpointParams);
6865

69-
swiper.emit('_beforeBreakpoint', breakpointParams);
66+
extend(swiper, {
67+
allowTouchMove: swiper.params.allowTouchMove,
68+
allowSlideNext: swiper.params.allowSlideNext,
69+
allowSlidePrev: swiper.params.allowSlidePrev,
70+
});
7071

71-
if (needsReLoop && initialized) {
72-
swiper.loopDestroy();
73-
swiper.loopCreate();
74-
swiper.updateSlides();
75-
swiper.slideTo(activeIndex - loopedSlides + swiper.loopedSlides, 0, false);
76-
}
72+
if (wasEnabled && !isEnabled) {
73+
swiper.disable();
74+
} else if (!wasEnabled && isEnabled) {
75+
swiper.enable();
76+
}
7777

78-
swiper.emit('breakpoint', breakpointParams);
78+
swiper.currentBreakpoint = breakpoint;
79+
80+
swiper.emit('_beforeBreakpoint', breakpointParams);
81+
82+
if (needsReLoop && initialized) {
83+
swiper.loopDestroy();
84+
swiper.loopCreate();
85+
swiper.updateSlides();
86+
swiper.slideTo(activeIndex - loopedSlides + swiper.loopedSlides, 0, false);
7987
}
88+
89+
swiper.emit('breakpoint', breakpointParams);
8090
}

‎src/components/core/core-class.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ class Swiper {
129129

130130
// Extend Swiper
131131
extend(swiper, {
132+
enabled: swiper.params.enabled,
132133
el,
133134

134135
// Classes
@@ -243,6 +244,26 @@ class Swiper {
243244
return swiper;
244245
}
245246

247+
enable() {
248+
const swiper = this;
249+
if (swiper.enabled) return;
250+
swiper.enabled = true;
251+
if (swiper.params.grabCursor) {
252+
swiper.setGrabCursor();
253+
}
254+
swiper.emit('enable');
255+
}
256+
257+
disable() {
258+
const swiper = this;
259+
if (!swiper.enabled) return;
260+
swiper.enabled = false;
261+
if (swiper.params.grabCursor) {
262+
swiper.unsetGrabCursor();
263+
}
264+
swiper.emit('disable');
265+
}
266+
246267
setProgress(progress, speed) {
247268
const swiper = this;
248269
progress = Math.min(Math.max(progress, 0), 1);
@@ -482,7 +503,7 @@ class Swiper {
482503
}
483504

484505
// Set Grab Cursor
485-
if (swiper.params.grabCursor) {
506+
if (swiper.params.grabCursor && swiper.enabled) {
486507
swiper.setGrabCursor();
487508
}
488509

@@ -496,9 +517,11 @@ class Swiper {
496517
swiper.params.initialSlide + swiper.loopedSlides,
497518
0,
498519
swiper.params.runCallbacksOnInit,
520+
false,
521+
true,
499522
);
500523
} else {
501-
swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit);
524+
swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit, false, true);
502525
}
503526

504527
// Attach events

‎src/components/core/defaults.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default {
88
updateOnWindowResize: true,
99
resizeObserver: false,
1010
nested: false,
11+
enabled: true,
1112

1213
// Overrides
1314
width: null,

‎src/components/core/events/onClick.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export default function onClick(e) {
22
const swiper = this;
3+
if (!swiper.enabled) return;
34
if (!swiper.allowClick) {
45
if (swiper.params.preventClicks) e.preventDefault();
56
if (swiper.params.preventClicksPropagation && swiper.animating) {

‎src/components/core/events/onScroll.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export default function onScroll() {
22
const swiper = this;
3-
const { wrapperEl, rtlTranslate } = swiper;
3+
const { wrapperEl, rtlTranslate, enabled } = swiper;
4+
if (!enabled) return;
45
swiper.previousTranslate = swiper.translate;
56
if (swiper.isHorizontal()) {
67
if (rtlTranslate) {

‎src/components/core/events/onTouchEnd.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ export default function onTouchEnd(event) {
44
const swiper = this;
55
const data = swiper.touchEventsData;
66

7-
const { params, touches, rtlTranslate: rtl, $wrapperEl, slidesGrid, snapGrid } = swiper;
7+
const { params, touches, rtlTranslate: rtl, $wrapperEl, slidesGrid, snapGrid, enabled } = swiper;
8+
if (!enabled) return;
89
let e = event;
910
if (e.originalEvent) e = e.originalEvent;
1011
if (data.allowTouchCallbacks) {

‎src/components/core/events/onTouchMove.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ export default function onTouchMove(event) {
66
const document = getDocument();
77
const swiper = this;
88
const data = swiper.touchEventsData;
9-
const { params, touches, rtlTranslate: rtl } = swiper;
9+
const { params, touches, rtlTranslate: rtl, enabled } = swiper;
10+
if (!enabled) return;
1011
let e = event;
1112
if (e.originalEvent) e = e.originalEvent;
1213
if (!data.isTouched) {

‎src/components/core/events/onTouchStart.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export default function onTouchStart(event) {
88
const window = getWindow();
99

1010
const data = swiper.touchEventsData;
11-
const { params, touches } = swiper;
11+
const { params, touches, enabled } = swiper;
12+
if (!enabled) return;
1213

1314
if (swiper.animating && params.preventInteractionOnTransition) {
1415
return;

‎src/components/core/slide/slideNext.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/* eslint no-unused-vars: "off" */
22
export default function slideNext(speed = this.params.speed, runCallbacks = true, internal) {
33
const swiper = this;
4-
const { params, animating } = swiper;
4+
const { params, animating, enabled } = swiper;
5+
if (!enabled) return swiper;
56
const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup;
67
if (params.loop) {
78
if (animating && params.loopPreventsSlide) return false;

‎src/components/core/slide/slidePrev.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/* eslint no-unused-vars: "off" */
22
export default function slidePrev(speed = this.params.speed, runCallbacks = true, internal) {
33
const swiper = this;
4-
const { params, animating, snapGrid, slidesGrid, rtlTranslate } = swiper;
4+
const { params, animating, snapGrid, slidesGrid, rtlTranslate, enabled } = swiper;
5+
if (!enabled) return swiper;
56

67
if (params.loop) {
78
if (animating && params.loopPreventsSlide) return false;

0 commit comments

Comments
 (0)