1 | import { h } from 'vue';
|
2 | import { calcLoopedSlides } from '../shared/calc-looped-slides.js';
|
3 |
|
4 | function renderLoop(swiperRef, slides, swiperParams) {
|
5 | const modifiedSlides = slides.map((child, index) => {
|
6 | if (!child.props) child.props = {};
|
7 | child.props.swiperRef = swiperRef;
|
8 | child.props['data-swiper-slide-index'] = index;
|
9 | return child;
|
10 | });
|
11 |
|
12 | function duplicateSlide(child, index, position) {
|
13 | if (!child.props) child.props = {};
|
14 | return h(child.type, { ...child.props,
|
15 | key: `${child.key}-duplicate-${index}-${position}`,
|
16 | class: `${child.props.className || ''} ${swiperParams.slideDuplicateClass} ${child.props.class || ''}`
|
17 | }, child.children);
|
18 | }
|
19 |
|
20 | if (swiperParams.loopFillGroupWithBlank) {
|
21 | const blankSlidesNum = swiperParams.slidesPerGroup - modifiedSlides.length % swiperParams.slidesPerGroup;
|
22 |
|
23 | if (blankSlidesNum !== swiperParams.slidesPerGroup) {
|
24 | for (let i = 0; i < blankSlidesNum; i += 1) {
|
25 | const blankSlide = h('div', {
|
26 | class: `${swiperParams.slideClass} ${swiperParams.slideBlankClass}`
|
27 | });
|
28 | modifiedSlides.push(blankSlide);
|
29 | }
|
30 | }
|
31 | }
|
32 |
|
33 | if (swiperParams.slidesPerView === 'auto' && !swiperParams.loopedSlides) {
|
34 | swiperParams.loopedSlides = modifiedSlides.length;
|
35 | }
|
36 |
|
37 | const loopedSlides = calcLoopedSlides(modifiedSlides, swiperParams);
|
38 | const prependSlides = [];
|
39 | const appendSlides = [];
|
40 |
|
41 | for (let i = 0; i < loopedSlides; i += 1) {
|
42 | const index = i - Math.floor(i / modifiedSlides.length) * modifiedSlides.length;
|
43 | appendSlides.push(duplicateSlide(modifiedSlides[index], i, 'append'));
|
44 | prependSlides.unshift(duplicateSlide(modifiedSlides[modifiedSlides.length - index - 1], i, 'prepend'));
|
45 | }
|
46 |
|
47 | if (swiperRef.value) {
|
48 | swiperRef.value.loopedSlides = loopedSlides;
|
49 | }
|
50 |
|
51 | return [...prependSlides, ...modifiedSlides, ...appendSlides];
|
52 | }
|
53 |
|
54 | export { calcLoopedSlides, renderLoop }; |
\ | No newline at end of file |