updateSlides.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. import {
  2. setCSSProperty
  3. } from '../../shared/utils.js';
  4. export default function updateSlides() {
  5. const swiper = this;
  6. function getDirectionLabel(property) {
  7. if (swiper.isHorizontal()) {
  8. return property;
  9. } // prettier-ignore
  10. return {
  11. 'width': 'height',
  12. 'margin-top': 'margin-left',
  13. 'margin-bottom ': 'margin-right',
  14. 'margin-left': 'margin-top',
  15. 'margin-right': 'margin-bottom',
  16. 'padding-left': 'padding-top',
  17. 'padding-right': 'padding-bottom',
  18. 'marginRight': 'marginBottom'
  19. } [property];
  20. }
  21. function getDirectionPropertyValue(node, label) {
  22. return parseFloat(node[getDirectionLabel(label)] || 0);
  23. }
  24. function getComputedStyle(native) {
  25. return native.itemStyle;
  26. }
  27. const params = swiper.params;
  28. const {
  29. $wrapperEl,
  30. size: swiperSize,
  31. rtlTranslate: rtl,
  32. wrongRTL
  33. } = swiper;
  34. const isVirtual = swiper.virtual && params.virtual.enabled;
  35. const previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length;
  36. // const slides = $wrapperEl.children(`.${swiper.params.slideClass}`);
  37. const slides = swiper.slides;
  38. const slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length;
  39. let snapGrid = [];
  40. const slidesGrid = [];
  41. const slidesSizesGrid = [];
  42. let offsetBefore = params.slidesOffsetBefore;
  43. if (typeof offsetBefore === 'function') {
  44. offsetBefore = params.slidesOffsetBefore.call(swiper);
  45. }
  46. let offsetAfter = params.slidesOffsetAfter;
  47. if (typeof offsetAfter === 'function') {
  48. offsetAfter = params.slidesOffsetAfter.call(swiper);
  49. }
  50. const previousSnapGridLength = swiper.snapGrid.length;
  51. const previousSlidesGridLength = swiper.slidesGrid.length;
  52. let spaceBetween = params.spaceBetween;
  53. let slidePosition = -offsetBefore;
  54. let prevSlideSize = 0;
  55. let index = 0;
  56. if (typeof swiperSize === 'undefined') {
  57. return;
  58. }
  59. if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
  60. spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiperSize;
  61. }
  62. swiper.virtualSize = -spaceBetween; // reset margins
  63. if (params.centeredSlides && params.cssMode) {
  64. setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', '');
  65. setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-after', '');
  66. }
  67. const gridEnabled = params.grid && params.grid.rows > 1 && swiper.grid;
  68. if (gridEnabled) {
  69. swiper.grid.initSlides(slidesLength);
  70. }
  71. let slideSize;
  72. const shouldResetSlideSize = params.slidesPerView === 'auto' && params.breakpoints && Object.keys(params
  73. .breakpoints).filter(key => {
  74. return typeof params.breakpoints[key].slidesPerView !== 'undefined';
  75. }).length > 0;
  76. Array(...Array(slidesLength)).forEach(async (item, i) => {
  77. slideSize = 0;
  78. const slide = slides[i];
  79. if (gridEnabled) {
  80. swiper.grid.updateSlide(i, slide, slidesLength, getDirectionLabel);
  81. }
  82. if (params.slidesPerView === 'auto') {
  83. if (shouldResetSlideSize) {
  84. slides[i].style[getDirectionLabel('width')] = ``;
  85. }
  86. const slideStyles = getComputedStyle(slide);
  87. const currentTransform = slide.itemStyle.transform;
  88. const currentWebKitTransform = slide.itemStyle.webkitTransform;
  89. if (currentTransform) {
  90. slide.itemStyle.transform = 'none';
  91. }
  92. if (currentWebKitTransform) {
  93. slide.itemStyle.webkitTransform = 'none';
  94. }
  95. if (params.roundLengths) {
  96. slideSize = swiper.isHorizontal() ? slide.outerWidth(true) : slide.outerHeight(true);
  97. } else {
  98. const width = swiper.isHorizontal() ? slide.width : slide.height;
  99. const paddingLeft = getDirectionPropertyValue(slideStyles, 'padding-left');
  100. const paddingRight = getDirectionPropertyValue(slideStyles, 'padding-right');
  101. const marginLeft = getDirectionPropertyValue(slideStyles, 'margin-left');
  102. const marginRight = getDirectionPropertyValue(slideStyles, 'margin-right');
  103. const boxSizing = slideStyles['box-sizing'];
  104. if (boxSizing && boxSizing === 'border-box') {
  105. slideSize = width + marginLeft + marginRight;
  106. } else {
  107. // slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight;
  108. slideSize = width;
  109. }
  110. }
  111. if (currentTransform) {
  112. slide.itemStyle.transform = currentTransform;
  113. }
  114. if (currentWebKitTransform) {
  115. slide.itemStyle.webkitTransform = currentWebKitTransform;
  116. }
  117. if (params.roundLengths) slideSize = Math.floor(slideSize);
  118. } else {
  119. slideSize = (swiperSize - (params.slidesPerView - 1) * spaceBetween) / params.slidesPerView;
  120. if (params.roundLengths) slideSize = Math.floor(slideSize);
  121. slides[i] && slides[i].css({
  122. [getDirectionLabel('width')]: `${slideSize}px`
  123. })
  124. }
  125. if (slides[i]) {
  126. slides[i].swiperSlideSize = slideSize;
  127. }
  128. if (params.autoHeight) {
  129. slides[i] && slides[i].css({
  130. height: 'auto'
  131. })
  132. }
  133. slidesSizesGrid.push(slideSize);
  134. if (params.centeredSlides) {
  135. slidePosition = slidePosition + slideSize / 2 + prevSlideSize / 2 + spaceBetween;
  136. if (prevSlideSize === 0 && i !== 0) slidePosition = slidePosition - swiperSize / 2 -
  137. spaceBetween;
  138. if (i === 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween;
  139. if (Math.abs(slidePosition) < 1 / 1000) slidePosition = 0;
  140. if (params.roundLengths) slidePosition = Math.floor(slidePosition);
  141. if (index % params.slidesPerGroup === 0) snapGrid.push(slidePosition);
  142. slidesGrid.push(slidePosition);
  143. } else {
  144. if (params.roundLengths) slidePosition = Math.floor(slidePosition);
  145. if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params
  146. .slidesPerGroup === 0)
  147. snapGrid.push(slidePosition);
  148. slidesGrid.push(slidePosition);
  149. slidePosition = slidePosition + slideSize + spaceBetween;
  150. }
  151. swiper.virtualSize += slideSize + spaceBetween;
  152. prevSlideSize = slideSize;
  153. index += 1;
  154. })
  155. swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;
  156. if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
  157. $wrapperEl.css({
  158. width: `${swiper.virtualSize + params.spaceBetween}px`
  159. });
  160. }
  161. if (params.setWrapperSize) {
  162. $wrapperEl.css({
  163. [getDirectionLabel('width')]: `${swiper.virtualSize + params.spaceBetween}px`
  164. });
  165. }
  166. if (gridEnabled) {
  167. swiper.grid.updateWrapperSize(slideSize, snapGrid, getDirectionLabel);
  168. } // Remove last grid elements depending on width
  169. if (!params.centeredSlides) {
  170. const newSlidesGrid = [];
  171. for (let i = 0; i < snapGrid.length; i += 1) {
  172. let slidesGridItem = snapGrid[i];
  173. if (params.roundLengths) slidesGridItem = Math.floor(slidesGridItem);
  174. if (snapGrid[i] <= swiper.virtualSize - swiperSize) {
  175. newSlidesGrid.push(slidesGridItem);
  176. }
  177. }
  178. snapGrid = newSlidesGrid;
  179. if (Math.floor(swiper.virtualSize - swiperSize) - Math.floor(snapGrid[snapGrid.length - 1]) > 1) {
  180. snapGrid.push(swiper.virtualSize - swiperSize);
  181. }
  182. }
  183. if (snapGrid.length === 0) snapGrid = [0];
  184. if (params.spaceBetween !== 0) {
  185. // #ifdef MP-BAIDU
  186. const key = swiper.isHorizontal() && rtl ? 'marginLeft' : getDirectionLabel('marginRight');
  187. // #endif
  188. // #ifndef MP-BAIDU
  189. const key = swiper.isHorizontal() && rtl ? 'margin-left' : getDirectionLabel('margin-right');
  190. // #endif
  191. slides.filter((_, slideIndex) => {
  192. if (!params.cssMode) return true;
  193. if (slideIndex === slides.length - 1) {
  194. return false;
  195. }
  196. return true;
  197. }).forEach((item) => {
  198. item.css({
  199. [key]: `${spaceBetween}px`
  200. })
  201. });
  202. }
  203. if (params.centeredSlides && params.centeredSlidesBounds) {
  204. let allSlidesSize = 0;
  205. slidesSizesGrid.forEach(slideSizeValue => {
  206. allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
  207. });
  208. allSlidesSize -= params.spaceBetween;
  209. const maxSnap = allSlidesSize - swiperSize;
  210. snapGrid = snapGrid.map(snap => {
  211. if (snap < 0) return -offsetBefore;
  212. if (snap > maxSnap) return maxSnap + offsetAfter;
  213. return snap;
  214. });
  215. }
  216. if (params.centerInsufficientSlides) {
  217. let allSlidesSize = 0;
  218. slidesSizesGrid.forEach(slideSizeValue => {
  219. allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
  220. });
  221. allSlidesSize -= params.spaceBetween;
  222. if (allSlidesSize < swiperSize) {
  223. const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
  224. snapGrid.forEach((snap, snapIndex) => {
  225. snapGrid[snapIndex] = snap - allSlidesOffset;
  226. });
  227. slidesGrid.forEach((snap, snapIndex) => {
  228. slidesGrid[snapIndex] = snap + allSlidesOffset;
  229. });
  230. }
  231. }
  232. Object.assign(swiper, {
  233. slides,
  234. snapGrid,
  235. slidesGrid,
  236. slidesSizesGrid
  237. });
  238. if (params.centeredSlides && params.cssMode && !params.centeredSlidesBounds) {
  239. setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', `${-snapGrid[0]}px`);
  240. setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-after',
  241. `${swiper.size / 2 - slidesSizesGrid[slidesSizesGrid.length - 1] / 2}px`);
  242. const addToSnapGrid = -swiper.snapGrid[0];
  243. const addToSlidesGrid = -swiper.slidesGrid[0];
  244. swiper.snapGrid = swiper.snapGrid.map(v => v + addToSnapGrid);
  245. swiper.slidesGrid = swiper.slidesGrid.map(v => v + addToSlidesGrid);
  246. }
  247. if (slidesLength !== previousSlidesLength) {
  248. swiper.emit('slidesLengthChange');
  249. }
  250. if (snapGrid.length !== previousSnapGridLength) {
  251. if (swiper.params.watchOverflow) swiper.checkOverflow();
  252. swiper.emit('snapGridLengthChange');
  253. }
  254. if (slidesGrid.length !== previousSlidesGridLength) {
  255. swiper.emit('slidesGridLengthChange');
  256. }
  257. if (params.watchSlidesProgress) {
  258. swiper.updateSlidesOffset();
  259. }
  260. return slides;
  261. }