grid.js 3.2 KB

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