grid.js 3.2 KB

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