effect-cards.js 4.1 KB

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