loop.js 2.5 KB

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