loop.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import React from 'react';
  2. import { calcLoopedSlides } from '../shared/calc-looped-slides.js';
  3. function renderLoop(swiper, slides, swiperParams) {
  4. const modifiedSlides = slides.map((child, index) => {
  5. return /*#__PURE__*/React.cloneElement(child, {
  6. swiper,
  7. 'data-swiper-slide-index': index
  8. });
  9. });
  10. function duplicateSlide(child, index, position) {
  11. return /*#__PURE__*/React.cloneElement(child, {
  12. key: `${child.key}-duplicate-${index}-${position}`,
  13. className: `${child.props.className || ''} ${swiperParams.slideDuplicateClass}`
  14. });
  15. }
  16. if (swiperParams.loopFillGroupWithBlank) {
  17. const blankSlidesNum = swiperParams.slidesPerGroup - modifiedSlides.length % swiperParams.slidesPerGroup;
  18. if (blankSlidesNum !== swiperParams.slidesPerGroup) {
  19. for (let i = 0; i < blankSlidesNum; i += 1) {
  20. const blankSlide = /*#__PURE__*/React.createElement("div", {
  21. className: `${swiperParams.slideClass} ${swiperParams.slideBlankClass}`
  22. });
  23. modifiedSlides.push(blankSlide);
  24. }
  25. }
  26. }
  27. if (swiperParams.slidesPerView === 'auto' && !swiperParams.loopedSlides) {
  28. swiperParams.loopedSlides = modifiedSlides.length;
  29. }
  30. const loopedSlides = calcLoopedSlides(modifiedSlides, swiperParams);
  31. const prependSlides = [];
  32. const appendSlides = [];
  33. for (let i = 0; i < loopedSlides; i += 1) {
  34. const index = i - Math.floor(i / modifiedSlides.length) * modifiedSlides.length;
  35. appendSlides.push(duplicateSlide(modifiedSlides[index], i, 'append'));
  36. prependSlides.unshift(duplicateSlide(modifiedSlides[modifiedSlides.length - index - 1], i, 'prepend'));
  37. }
  38. if (swiper) {
  39. swiper.loopedSlides = loopedSlides;
  40. }
  41. return [...prependSlides, ...modifiedSlides, ...appendSlides];
  42. }
  43. export { calcLoopedSlides, renderLoop };