1 | import { setCSSProperty } from '../../shared/utils.js';
|
2 | export default function updateSlides() {
|
3 | const swiper = this;
|
4 |
|
5 | function getDirectionLabel(property) {
|
6 | if (swiper.isHorizontal()) {
|
7 | return property;
|
8 | }
|
9 |
|
10 |
|
11 | return {
|
12 | 'width': 'height',
|
13 | 'margin-top': 'margin-left',
|
14 | 'margin-bottom ': 'margin-right',
|
15 | 'margin-left': 'margin-top',
|
16 | 'margin-right': 'margin-bottom',
|
17 | 'padding-left': 'padding-top',
|
18 | 'padding-right': 'padding-bottom',
|
19 | 'marginRight': 'marginBottom'
|
20 | }[property];
|
21 | }
|
22 |
|
23 | function getDirectionPropertyValue(node, label) {
|
24 | return parseFloat(node.getPropertyValue(getDirectionLabel(label)) || 0);
|
25 | }
|
26 |
|
27 | const params = swiper.params;
|
28 | const {
|
29 | $wrapperEl,
|
30 | size: swiperSize,
|
31 | rtlTranslate: rtl,
|
32 | wrongRTL
|
33 | } = swiper;
|
34 | const isVirtual = swiper.virtual && params.virtual.enabled;
|
35 | const previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length;
|
36 | const slides = $wrapperEl.children(`.${swiper.params.slideClass}`);
|
37 | const slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length;
|
38 | let snapGrid = [];
|
39 | const slidesGrid = [];
|
40 | const slidesSizesGrid = [];
|
41 | let offsetBefore = params.slidesOffsetBefore;
|
42 |
|
43 | if (typeof offsetBefore === 'function') {
|
44 | offsetBefore = params.slidesOffsetBefore.call(swiper);
|
45 | }
|
46 |
|
47 | let offsetAfter = params.slidesOffsetAfter;
|
48 |
|
49 | if (typeof offsetAfter === 'function') {
|
50 | offsetAfter = params.slidesOffsetAfter.call(swiper);
|
51 | }
|
52 |
|
53 | const previousSnapGridLength = swiper.snapGrid.length;
|
54 | const previousSlidesGridLength = swiper.slidesGrid.length;
|
55 | let spaceBetween = params.spaceBetween;
|
56 | let slidePosition = -offsetBefore;
|
57 | let prevSlideSize = 0;
|
58 | let index = 0;
|
59 |
|
60 | if (typeof swiperSize === 'undefined') {
|
61 | return;
|
62 | }
|
63 |
|
64 | if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
|
65 | spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiperSize;
|
66 | }
|
67 |
|
68 | swiper.virtualSize = -spaceBetween;
|
69 |
|
70 | if (rtl) slides.css({
|
71 | marginLeft: '',
|
72 | marginBottom: '',
|
73 | marginTop: ''
|
74 | });else slides.css({
|
75 | marginRight: '',
|
76 | marginBottom: '',
|
77 | marginTop: ''
|
78 | });
|
79 |
|
80 | if (params.centeredSlides && params.cssMode) {
|
81 | setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', '');
|
82 | setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-after', '');
|
83 | }
|
84 |
|
85 | const gridEnabled = params.grid && params.grid.rows > 1 && swiper.grid;
|
86 |
|
87 | if (gridEnabled) {
|
88 | swiper.grid.initSlides(slidesLength);
|
89 | }
|
90 |
|
91 |
|
92 | let slideSize;
|
93 | const shouldResetSlideSize = params.slidesPerView === 'auto' && params.breakpoints && Object.keys(params.breakpoints).filter(key => {
|
94 | return typeof params.breakpoints[key].slidesPerView !== 'undefined';
|
95 | }).length > 0;
|
96 |
|
97 | for (let i = 0; i < slidesLength; i += 1) {
|
98 | slideSize = 0;
|
99 | const slide = slides.eq(i);
|
100 |
|
101 | if (gridEnabled) {
|
102 | swiper.grid.updateSlide(i, slide, slidesLength, getDirectionLabel);
|
103 | }
|
104 |
|
105 | if (slide.css('display') === 'none') continue;
|
106 |
|
107 | if (params.slidesPerView === 'auto') {
|
108 | if (shouldResetSlideSize) {
|
109 | slides[i].style[getDirectionLabel('width')] = ``;
|
110 | }
|
111 |
|
112 | const slideStyles = getComputedStyle(slide[0]);
|
113 | const currentTransform = slide[0].style.transform;
|
114 | const currentWebKitTransform = slide[0].style.webkitTransform;
|
115 |
|
116 | if (currentTransform) {
|
117 | slide[0].style.transform = 'none';
|
118 | }
|
119 |
|
120 | if (currentWebKitTransform) {
|
121 | slide[0].style.webkitTransform = 'none';
|
122 | }
|
123 |
|
124 | if (params.roundLengths) {
|
125 | slideSize = swiper.isHorizontal() ? slide.outerWidth(true) : slide.outerHeight(true);
|
126 | } else {
|
127 |
|
128 | const width = getDirectionPropertyValue(slideStyles, 'width');
|
129 | const paddingLeft = getDirectionPropertyValue(slideStyles, 'padding-left');
|
130 | const paddingRight = getDirectionPropertyValue(slideStyles, 'padding-right');
|
131 | const marginLeft = getDirectionPropertyValue(slideStyles, 'margin-left');
|
132 | const marginRight = getDirectionPropertyValue(slideStyles, 'margin-right');
|
133 | const boxSizing = slideStyles.getPropertyValue('box-sizing');
|
134 |
|
135 | if (boxSizing && boxSizing === 'border-box') {
|
136 | slideSize = width + marginLeft + marginRight;
|
137 | } else {
|
138 | const {
|
139 | clientWidth,
|
140 | offsetWidth
|
141 | } = slide[0];
|
142 | slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight + (offsetWidth - clientWidth);
|
143 | }
|
144 | }
|
145 |
|
146 | if (currentTransform) {
|
147 | slide[0].style.transform = currentTransform;
|
148 | }
|
149 |
|
150 | if (currentWebKitTransform) {
|
151 | slide[0].style.webkitTransform = currentWebKitTransform;
|
152 | }
|
153 |
|
154 | if (params.roundLengths) slideSize = Math.floor(slideSize);
|
155 | } else {
|
156 | slideSize = (swiperSize - (params.slidesPerView - 1) * spaceBetween) / params.slidesPerView;
|
157 | if (params.roundLengths) slideSize = Math.floor(slideSize);
|
158 |
|
159 | if (slides[i]) {
|
160 | slides[i].style[getDirectionLabel('width')] = `${slideSize}px`;
|
161 | }
|
162 | }
|
163 |
|
164 | if (slides[i]) {
|
165 | slides[i].swiperSlideSize = slideSize;
|
166 | }
|
167 |
|
168 | slidesSizesGrid.push(slideSize);
|
169 |
|
170 | if (params.centeredSlides) {
|
171 | slidePosition = slidePosition + slideSize / 2 + prevSlideSize / 2 + spaceBetween;
|
172 | if (prevSlideSize === 0 && i !== 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween;
|
173 | if (i === 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween;
|
174 | if (Math.abs(slidePosition) < 1 / 1000) slidePosition = 0;
|
175 | if (params.roundLengths) slidePosition = Math.floor(slidePosition);
|
176 | if (index % params.slidesPerGroup === 0) snapGrid.push(slidePosition);
|
177 | slidesGrid.push(slidePosition);
|
178 | } else {
|
179 | if (params.roundLengths) slidePosition = Math.floor(slidePosition);
|
180 | if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params.slidesPerGroup === 0) snapGrid.push(slidePosition);
|
181 | slidesGrid.push(slidePosition);
|
182 | slidePosition = slidePosition + slideSize + spaceBetween;
|
183 | }
|
184 |
|
185 | swiper.virtualSize += slideSize + spaceBetween;
|
186 | prevSlideSize = slideSize;
|
187 | index += 1;
|
188 | }
|
189 |
|
190 | swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;
|
191 |
|
192 | if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
|
193 | $wrapperEl.css({
|
194 | width: `${swiper.virtualSize + params.spaceBetween}px`
|
195 | });
|
196 | }
|
197 |
|
198 | if (params.setWrapperSize) {
|
199 | $wrapperEl.css({
|
200 | [getDirectionLabel('width')]: `${swiper.virtualSize + params.spaceBetween}px`
|
201 | });
|
202 | }
|
203 |
|
204 | if (gridEnabled) {
|
205 | swiper.grid.updateWrapperSize(slideSize, snapGrid, getDirectionLabel);
|
206 | }
|
207 |
|
208 |
|
209 | if (!params.centeredSlides) {
|
210 | const newSlidesGrid = [];
|
211 |
|
212 | for (let i = 0; i < snapGrid.length; i += 1) {
|
213 | let slidesGridItem = snapGrid[i];
|
214 | if (params.roundLengths) slidesGridItem = Math.floor(slidesGridItem);
|
215 |
|
216 | if (snapGrid[i] <= swiper.virtualSize - swiperSize) {
|
217 | newSlidesGrid.push(slidesGridItem);
|
218 | }
|
219 | }
|
220 |
|
221 | snapGrid = newSlidesGrid;
|
222 |
|
223 | if (Math.floor(swiper.virtualSize - swiperSize) - Math.floor(snapGrid[snapGrid.length - 1]) > 1) {
|
224 | snapGrid.push(swiper.virtualSize - swiperSize);
|
225 | }
|
226 | }
|
227 |
|
228 | if (snapGrid.length === 0) snapGrid = [0];
|
229 |
|
230 | if (params.spaceBetween !== 0) {
|
231 | const key = swiper.isHorizontal() && rtl ? 'marginLeft' : getDirectionLabel('marginRight');
|
232 | slides.filter((_, slideIndex) => {
|
233 | if (!params.cssMode) return true;
|
234 |
|
235 | if (slideIndex === slides.length - 1) {
|
236 | return false;
|
237 | }
|
238 |
|
239 | return true;
|
240 | }).css({
|
241 | [key]: `${spaceBetween}px`
|
242 | });
|
243 | }
|
244 |
|
245 | if (params.centeredSlides && params.centeredSlidesBounds) {
|
246 | let allSlidesSize = 0;
|
247 | slidesSizesGrid.forEach(slideSizeValue => {
|
248 | allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
|
249 | });
|
250 | allSlidesSize -= params.spaceBetween;
|
251 | const maxSnap = allSlidesSize - swiperSize;
|
252 | snapGrid = snapGrid.map(snap => {
|
253 | if (snap < 0) return -offsetBefore;
|
254 | if (snap > maxSnap) return maxSnap + offsetAfter;
|
255 | return snap;
|
256 | });
|
257 | }
|
258 |
|
259 | if (params.centerInsufficientSlides) {
|
260 | let allSlidesSize = 0;
|
261 | slidesSizesGrid.forEach(slideSizeValue => {
|
262 | allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
|
263 | });
|
264 | allSlidesSize -= params.spaceBetween;
|
265 |
|
266 | if (allSlidesSize < swiperSize) {
|
267 | const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
|
268 | snapGrid.forEach((snap, snapIndex) => {
|
269 | snapGrid[snapIndex] = snap - allSlidesOffset;
|
270 | });
|
271 | slidesGrid.forEach((snap, snapIndex) => {
|
272 | slidesGrid[snapIndex] = snap + allSlidesOffset;
|
273 | });
|
274 | }
|
275 | }
|
276 |
|
277 | Object.assign(swiper, {
|
278 | slides,
|
279 | snapGrid,
|
280 | slidesGrid,
|
281 | slidesSizesGrid
|
282 | });
|
283 |
|
284 | if (params.centeredSlides && params.cssMode && !params.centeredSlidesBounds) {
|
285 | setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', `${-snapGrid[0]}px`);
|
286 | setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-after', `${swiper.size / 2 - slidesSizesGrid[slidesSizesGrid.length - 1] / 2}px`);
|
287 | const addToSnapGrid = -swiper.snapGrid[0];
|
288 | const addToSlidesGrid = -swiper.slidesGrid[0];
|
289 | swiper.snapGrid = swiper.snapGrid.map(v => v + addToSnapGrid);
|
290 | swiper.slidesGrid = swiper.slidesGrid.map(v => v + addToSlidesGrid);
|
291 | }
|
292 |
|
293 | if (slidesLength !== previousSlidesLength) {
|
294 | swiper.emit('slidesLengthChange');
|
295 | }
|
296 |
|
297 | if (snapGrid.length !== previousSnapGridLength) {
|
298 | if (swiper.params.watchOverflow) swiper.checkOverflow();
|
299 | swiper.emit('snapGridLengthChange');
|
300 | }
|
301 |
|
302 | if (slidesGrid.length !== previousSlidesGridLength) {
|
303 | swiper.emit('slidesGridLengthChange');
|
304 | }
|
305 |
|
306 | if (params.watchSlidesProgress) {
|
307 | swiper.updateSlidesOffset();
|
308 | }
|
309 |
|
310 | if (!isVirtual && !params.cssMode && (params.effect === 'slide' || params.effect === 'fade')) {
|
311 | const backFaceHiddenClass = `${params.containerModifierClass}backface-hidden`;
|
312 | const hasClassBackfaceClassAdded = swiper.$el.hasClass(backFaceHiddenClass);
|
313 |
|
314 | if (slidesLength <= params.maxBackfaceHiddenSlides) {
|
315 | if (!hasClassBackfaceClassAdded) swiper.$el.addClass(backFaceHiddenClass);
|
316 | } else if (hasClassBackfaceClassAdded) {
|
317 | swiper.$el.removeClass(backFaceHiddenClass);
|
318 | }
|
319 | }
|
320 | } |
\ | No newline at end of file |