/
setBreakpoint.js
80 lines (68 loc) · 2.86 KB
/
setBreakpoint.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import { extend } from '../../../utils/utils';
export default function setBreakpoint() {
const swiper = this;
const { activeIndex, initialized, loopedSlides = 0, params, $el } = swiper;
const breakpoints = params.breakpoints;
if (!breakpoints || (breakpoints && Object.keys(breakpoints).length === 0)) return;
// Get breakpoint for window width and update parameters
const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);
if (breakpoint && swiper.currentBreakpoint !== breakpoint) {
const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
if (breakpointOnlyParams) {
[
'slidesPerView',
'spaceBetween',
'slidesPerGroup',
'slidesPerGroupSkip',
'slidesPerColumn',
].forEach((param) => {
const paramValue = breakpointOnlyParams[param];
if (typeof paramValue === 'undefined') return;
if (param === 'slidesPerView' && (paramValue === 'AUTO' || paramValue === 'auto')) {
breakpointOnlyParams[param] = 'auto';
} else if (param === 'slidesPerView') {
breakpointOnlyParams[param] = parseFloat(paramValue);
} else {
breakpointOnlyParams[param] = parseInt(paramValue, 10);
}
});
}
const breakpointParams = breakpointOnlyParams || swiper.originalParams;
const wasMultiRow = params.slidesPerColumn > 1;
const isMultiRow = breakpointParams.slidesPerColumn > 1;
if (wasMultiRow && !isMultiRow) {
$el.removeClass(
`${params.containerModifierClass}multirow ${params.containerModifierClass}multirow-column`,
);
swiper.emitContainerClasses();
} else if (!wasMultiRow && isMultiRow) {
$el.addClass(`${params.containerModifierClass}multirow`);
if (breakpointParams.slidesPerColumnFill === 'column') {
$el.addClass(`${params.containerModifierClass}multirow-column`);
}
swiper.emitContainerClasses();
}
const directionChanged =
breakpointParams.direction && breakpointParams.direction !== params.direction;
const needsReLoop =
params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
if (directionChanged && initialized) {
swiper.changeDirection();
}
extend(swiper.params, breakpointParams);
extend(swiper, {
allowTouchMove: swiper.params.allowTouchMove,
allowSlideNext: swiper.params.allowSlideNext,
allowSlidePrev: swiper.params.allowSlidePrev,
});
swiper.currentBreakpoint = breakpoint;
swiper.emit('_beforeBreakpoint', breakpointParams);
if (needsReLoop && initialized) {
swiper.loopDestroy();
swiper.loopCreate();
swiper.updateSlides();
swiper.slideTo(activeIndex - loopedSlides + swiper.loopedSlides, 0, false);
}
swiper.emit('breakpoint', breakpointParams);
}
}