1 | import React from 'react';
|
2 | import Swiper from 'swiper';
|
3 |
|
4 | function calcLoopedSlides(slides, swiperParams) {
|
5 | let slidesPerViewParams = swiperParams.slidesPerView;
|
6 |
|
7 | if (swiperParams.breakpoints) {
|
8 | const breakpoint = Swiper.prototype.getBreakpoint(swiperParams.breakpoints);
|
9 | const breakpointOnlyParams = breakpoint in swiperParams.breakpoints ? swiperParams.breakpoints[breakpoint] : undefined;
|
10 |
|
11 | if (breakpointOnlyParams && breakpointOnlyParams.slidesPerView) {
|
12 | slidesPerViewParams = breakpointOnlyParams.slidesPerView;
|
13 | }
|
14 | }
|
15 |
|
16 | let loopedSlides = Math.ceil(parseFloat(swiperParams.loopedSlides || slidesPerViewParams, 10));
|
17 | loopedSlides += swiperParams.loopAdditionalSlides;
|
18 |
|
19 | if (loopedSlides > slides.length) {
|
20 | loopedSlides = slides.length;
|
21 | }
|
22 |
|
23 | return loopedSlides;
|
24 | }
|
25 |
|
26 | function renderLoop(swiper, slides, swiperParams) {
|
27 | const modifiedSlides = slides.map((child, index) => {
|
28 | return React.cloneElement(child, {
|
29 | swiper,
|
30 | 'data-swiper-slide-index': index
|
31 | });
|
32 | });
|
33 |
|
34 | function duplicateSlide(child, index, position) {
|
35 | return React.cloneElement(child, {
|
36 | key: `${child.key}-duplicate-${index}-${position}`,
|
37 | className: `${child.props.className || ''} ${swiperParams.slideDuplicateClass}`
|
38 | });
|
39 | }
|
40 |
|
41 | if (swiperParams.loopFillGroupWithBlank) {
|
42 | const blankSlidesNum = swiperParams.slidesPerGroup - modifiedSlides.length % swiperParams.slidesPerGroup;
|
43 |
|
44 | if (blankSlidesNum !== swiperParams.slidesPerGroup) {
|
45 | for (let i = 0; i < blankSlidesNum; i += 1) {
|
46 | const blankSlide = React.createElement("div", {
|
47 | className: `${swiperParams.slideClass} ${swiperParams.slideBlankClass}`
|
48 | });
|
49 | modifiedSlides.push(blankSlide);
|
50 | }
|
51 | }
|
52 | }
|
53 |
|
54 | if (swiperParams.slidesPerView === 'auto' && !swiperParams.loopedSlides) {
|
55 | swiperParams.loopedSlides = modifiedSlides.length;
|
56 | }
|
57 |
|
58 | const loopedSlides = calcLoopedSlides(modifiedSlides, swiperParams);
|
59 | const prependSlides = [];
|
60 | const appendSlides = [];
|
61 | modifiedSlides.forEach((child, index) => {
|
62 | if (index < loopedSlides) {
|
63 | appendSlides.push(duplicateSlide(child, index, 'prepend'));
|
64 | }
|
65 |
|
66 | if (index < modifiedSlides.length && index >= modifiedSlides.length - loopedSlides) {
|
67 | prependSlides.push(duplicateSlide(child, index, 'append'));
|
68 | }
|
69 | });
|
70 |
|
71 | if (swiper) {
|
72 | swiper.loopedSlides = loopedSlides;
|
73 | }
|
74 |
|
75 | return [...prependSlides, ...modifiedSlides, ...appendSlides];
|
76 | }
|
77 |
|
78 | export { calcLoopedSlides, renderLoop }; |
\ | No newline at end of file |