grid.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. export default function Grid({
  2. swiper,
  3. extendParams
  4. }) {
  5. extendParams({
  6. grid: {
  7. rows: 1,
  8. fill: 'column'
  9. }
  10. });
  11. let slidesNumberEvenToRows;
  12. let slidesPerRow;
  13. let numFullColumns;
  14. const getSpaceBetween = () => {
  15. let spaceBetween = swiper.params.spaceBetween;
  16. if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
  17. spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiper.size;
  18. } else if (typeof spaceBetween === 'string') {
  19. spaceBetween = parseFloat(spaceBetween);
  20. }
  21. return spaceBetween;
  22. };
  23. const initSlides = slidesLength => {
  24. const {
  25. slidesPerView
  26. } = swiper.params;
  27. const {
  28. rows,
  29. fill
  30. } = swiper.params.grid;
  31. numFullColumns = Math.floor(slidesLength / rows);
  32. if (Math.floor(slidesLength / rows) === slidesLength / rows) {
  33. slidesNumberEvenToRows = slidesLength;
  34. } else {
  35. slidesNumberEvenToRows = Math.ceil(slidesLength / rows) * rows;
  36. }
  37. if (slidesPerView !== 'auto' && fill === 'row') {
  38. slidesNumberEvenToRows = Math.max(slidesNumberEvenToRows, slidesPerView * rows);
  39. }
  40. slidesPerRow = slidesNumberEvenToRows / rows;
  41. };
  42. const updateSlide = (i, slide, slidesLength, getDirectionLabel) => {
  43. const {
  44. slidesPerGroup
  45. } = swiper.params;
  46. const spaceBetween = getSpaceBetween();
  47. const {
  48. rows,
  49. fill
  50. } = swiper.params.grid;
  51. // Set slides order
  52. let newSlideOrderIndex;
  53. let column;
  54. let row;
  55. if (fill === 'row' && slidesPerGroup > 1) {
  56. const groupIndex = Math.floor(i / (slidesPerGroup * rows));
  57. const slideIndexInGroup = i - rows * slidesPerGroup * groupIndex;
  58. const columnsInGroup = groupIndex === 0 ? slidesPerGroup : Math.min(Math.ceil((slidesLength - groupIndex * rows * slidesPerGroup) / rows), slidesPerGroup);
  59. row = Math.floor(slideIndexInGroup / columnsInGroup);
  60. column = slideIndexInGroup - row * columnsInGroup + groupIndex * slidesPerGroup;
  61. newSlideOrderIndex = column + row * slidesNumberEvenToRows / rows;
  62. slide.style.order = newSlideOrderIndex;
  63. } else if (fill === 'column') {
  64. column = Math.floor(i / rows);
  65. row = i - column * rows;
  66. if (column > numFullColumns || column === numFullColumns && row === rows - 1) {
  67. row += 1;
  68. if (row >= rows) {
  69. row = 0;
  70. column += 1;
  71. }
  72. }
  73. } else {
  74. row = Math.floor(i / slidesPerRow);
  75. column = i - row * slidesPerRow;
  76. }
  77. slide.row = row;
  78. slide.column = column;
  79. slide.style[getDirectionLabel('margin-top')] = row !== 0 ? spaceBetween && `${spaceBetween}px` : '';
  80. };
  81. const updateWrapperSize = (slideSize, snapGrid, getDirectionLabel) => {
  82. const {
  83. centeredSlides,
  84. roundLengths
  85. } = swiper.params;
  86. const spaceBetween = getSpaceBetween();
  87. const {
  88. rows
  89. } = swiper.params.grid;
  90. swiper.virtualSize = (slideSize + spaceBetween) * slidesNumberEvenToRows;
  91. swiper.virtualSize = Math.ceil(swiper.virtualSize / rows) - spaceBetween;
  92. swiper.wrapperEl.style[getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`;
  93. if (centeredSlides) {
  94. const newSlidesGrid = [];
  95. for (let i = 0; i < snapGrid.length; i += 1) {
  96. let slidesGridItem = snapGrid[i];
  97. if (roundLengths) slidesGridItem = Math.floor(slidesGridItem);
  98. if (snapGrid[i] < swiper.virtualSize + snapGrid[0]) newSlidesGrid.push(slidesGridItem);
  99. }
  100. snapGrid.splice(0, snapGrid.length);
  101. snapGrid.push(...newSlidesGrid);
  102. }
  103. };
  104. swiper.grid = {
  105. initSlides,
  106. updateSlide,
  107. updateWrapperSize
  108. };
  109. }