effect-cards.mjs 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. import { c as createShadow } from '../shared/create-shadow.mjs';
  2. import { e as effectInit } from '../shared/effect-init.mjs';
  3. import { e as effectTarget } from '../shared/effect-target.mjs';
  4. import { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';
  5. import { g as getSlideTransformEl } from '../shared/utils.mjs';
  6. function EffectCards(_ref) {
  7. let {
  8. swiper,
  9. extendParams,
  10. on
  11. } = _ref;
  12. extendParams({
  13. cardsEffect: {
  14. slideShadows: true,
  15. rotate: true,
  16. perSlideRotate: 2,
  17. perSlideOffset: 8
  18. }
  19. });
  20. const setTranslate = () => {
  21. const {
  22. slides,
  23. activeIndex,
  24. rtlTranslate: rtl
  25. } = swiper;
  26. const params = swiper.params.cardsEffect;
  27. const {
  28. startTranslate,
  29. isTouched
  30. } = swiper.touchEventsData;
  31. const currentTranslate = rtl ? -swiper.translate : swiper.translate;
  32. for (let i = 0; i < slides.length; i += 1) {
  33. const slideEl = slides[i];
  34. const slideProgress = slideEl.progress;
  35. const progress = Math.min(Math.max(slideProgress, -4), 4);
  36. let offset = slideEl.swiperSlideOffset;
  37. if (swiper.params.centeredSlides && !swiper.params.cssMode) {
  38. swiper.wrapperEl.style.transform = `translateX(${swiper.minTranslate()}px)`;
  39. }
  40. if (swiper.params.centeredSlides && swiper.params.cssMode) {
  41. offset -= slides[0].swiperSlideOffset;
  42. }
  43. let tX = swiper.params.cssMode ? -offset - swiper.translate : -offset;
  44. let tY = 0;
  45. const tZ = -100 * Math.abs(progress);
  46. let scale = 1;
  47. let rotate = -params.perSlideRotate * progress;
  48. let tXAdd = params.perSlideOffset - Math.abs(progress) * 0.75;
  49. const slideIndex = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.from + i : i;
  50. const isSwipeToNext = (slideIndex === activeIndex || slideIndex === activeIndex - 1) && progress > 0 && progress < 1 && (isTouched || swiper.params.cssMode) && currentTranslate < startTranslate;
  51. const isSwipeToPrev = (slideIndex === activeIndex || slideIndex === activeIndex + 1) && progress < 0 && progress > -1 && (isTouched || swiper.params.cssMode) && currentTranslate > startTranslate;
  52. if (isSwipeToNext || isSwipeToPrev) {
  53. const subProgress = (1 - Math.abs((Math.abs(progress) - 0.5) / 0.5)) ** 0.5;
  54. rotate += -28 * progress * subProgress;
  55. scale += -0.5 * subProgress;
  56. tXAdd += 96 * subProgress;
  57. tY = `${-25 * subProgress * Math.abs(progress)}%`;
  58. }
  59. if (progress < 0) {
  60. // next
  61. tX = `calc(${tX}px ${rtl ? '-' : '+'} (${tXAdd * Math.abs(progress)}%))`;
  62. } else if (progress > 0) {
  63. // prev
  64. tX = `calc(${tX}px ${rtl ? '-' : '+'} (-${tXAdd * Math.abs(progress)}%))`;
  65. } else {
  66. tX = `${tX}px`;
  67. }
  68. if (!swiper.isHorizontal()) {
  69. const prevY = tY;
  70. tY = tX;
  71. tX = prevY;
  72. }
  73. const scaleString = progress < 0 ? `${1 + (1 - scale) * progress}` : `${1 - (1 - scale) * progress}`;
  74. /* eslint-disable */
  75. const transform = `
  76. translate3d(${tX}, ${tY}, ${tZ}px)
  77. rotateZ(${params.rotate ? rtl ? -rotate : rotate : 0}deg)
  78. scale(${scaleString})
  79. `;
  80. /* eslint-enable */
  81. if (params.slideShadows) {
  82. // Set shadows
  83. let shadowEl = slideEl.querySelector('.swiper-slide-shadow');
  84. if (!shadowEl) {
  85. shadowEl = createShadow('cards', slideEl);
  86. }
  87. if (shadowEl) shadowEl.style.opacity = Math.min(Math.max((Math.abs(progress) - 0.5) / 0.5, 0), 1);
  88. }
  89. slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
  90. const targetEl = effectTarget(params, slideEl);
  91. targetEl.style.transform = transform;
  92. }
  93. };
  94. const setTransition = duration => {
  95. const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
  96. transformElements.forEach(el => {
  97. el.style.transitionDuration = `${duration}ms`;
  98. el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => {
  99. shadowEl.style.transitionDuration = `${duration}ms`;
  100. });
  101. });
  102. effectVirtualTransitionEnd({
  103. swiper,
  104. duration,
  105. transformElements
  106. });
  107. };
  108. effectInit({
  109. effect: 'cards',
  110. swiper,
  111. on,
  112. setTranslate,
  113. setTransition,
  114. perspective: () => true,
  115. overwriteParams: () => ({
  116. watchSlidesProgress: true,
  117. virtualTranslate: !swiper.params.cssMode
  118. })
  119. });
  120. }
  121. export { EffectCards as default };