updateSlides.js 10 KB

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