effect-cube.mjs 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import { e as effectInit } from '../shared/effect-init.mjs';
  2. import { c as createElement, o as getRotateFix } from '../shared/utils.mjs';
  3. function EffectCube(_ref) {
  4. let {
  5. swiper,
  6. extendParams,
  7. on
  8. } = _ref;
  9. extendParams({
  10. cubeEffect: {
  11. slideShadows: true,
  12. shadow: true,
  13. shadowOffset: 20,
  14. shadowScale: 0.94
  15. }
  16. });
  17. const createSlideShadows = (slideEl, progress, isHorizontal) => {
  18. let shadowBefore = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');
  19. let shadowAfter = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');
  20. if (!shadowBefore) {
  21. shadowBefore = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}`.split(' '));
  22. slideEl.append(shadowBefore);
  23. }
  24. if (!shadowAfter) {
  25. shadowAfter = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}`.split(' '));
  26. slideEl.append(shadowAfter);
  27. }
  28. if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0);
  29. if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0);
  30. };
  31. const recreateShadows = () => {
  32. // create new ones
  33. const isHorizontal = swiper.isHorizontal();
  34. swiper.slides.forEach(slideEl => {
  35. const progress = Math.max(Math.min(slideEl.progress, 1), -1);
  36. createSlideShadows(slideEl, progress, isHorizontal);
  37. });
  38. };
  39. const setTranslate = () => {
  40. const {
  41. el,
  42. wrapperEl,
  43. slides,
  44. width: swiperWidth,
  45. height: swiperHeight,
  46. rtlTranslate: rtl,
  47. size: swiperSize,
  48. browser
  49. } = swiper;
  50. const r = getRotateFix(swiper);
  51. const params = swiper.params.cubeEffect;
  52. const isHorizontal = swiper.isHorizontal();
  53. const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
  54. let wrapperRotate = 0;
  55. let cubeShadowEl;
  56. if (params.shadow) {
  57. if (isHorizontal) {
  58. cubeShadowEl = swiper.wrapperEl.querySelector('.swiper-cube-shadow');
  59. if (!cubeShadowEl) {
  60. cubeShadowEl = createElement('div', 'swiper-cube-shadow');
  61. swiper.wrapperEl.append(cubeShadowEl);
  62. }
  63. cubeShadowEl.style.height = `${swiperWidth}px`;
  64. } else {
  65. cubeShadowEl = el.querySelector('.swiper-cube-shadow');
  66. if (!cubeShadowEl) {
  67. cubeShadowEl = createElement('div', 'swiper-cube-shadow');
  68. el.append(cubeShadowEl);
  69. }
  70. }
  71. }
  72. for (let i = 0; i < slides.length; i += 1) {
  73. const slideEl = slides[i];
  74. let slideIndex = i;
  75. if (isVirtual) {
  76. slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10);
  77. }
  78. let slideAngle = slideIndex * 90;
  79. let round = Math.floor(slideAngle / 360);
  80. if (rtl) {
  81. slideAngle = -slideAngle;
  82. round = Math.floor(-slideAngle / 360);
  83. }
  84. const progress = Math.max(Math.min(slideEl.progress, 1), -1);
  85. let tx = 0;
  86. let ty = 0;
  87. let tz = 0;
  88. if (slideIndex % 4 === 0) {
  89. tx = -round * 4 * swiperSize;
  90. tz = 0;
  91. } else if ((slideIndex - 1) % 4 === 0) {
  92. tx = 0;
  93. tz = -round * 4 * swiperSize;
  94. } else if ((slideIndex - 2) % 4 === 0) {
  95. tx = swiperSize + round * 4 * swiperSize;
  96. tz = swiperSize;
  97. } else if ((slideIndex - 3) % 4 === 0) {
  98. tx = -swiperSize;
  99. tz = 3 * swiperSize + swiperSize * 4 * round;
  100. }
  101. if (rtl) {
  102. tx = -tx;
  103. }
  104. if (!isHorizontal) {
  105. ty = tx;
  106. tx = 0;
  107. }
  108. const transform = `rotateX(${r(isHorizontal ? 0 : -slideAngle)}deg) rotateY(${r(isHorizontal ? slideAngle : 0)}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
  109. if (progress <= 1 && progress > -1) {
  110. wrapperRotate = slideIndex * 90 + progress * 90;
  111. if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
  112. }
  113. slideEl.style.transform = transform;
  114. if (params.slideShadows) {
  115. createSlideShadows(slideEl, progress, isHorizontal);
  116. }
  117. }
  118. wrapperEl.style.transformOrigin = `50% 50% -${swiperSize / 2}px`;
  119. wrapperEl.style['-webkit-transform-origin'] = `50% 50% -${swiperSize / 2}px`;
  120. if (params.shadow) {
  121. if (isHorizontal) {
  122. cubeShadowEl.style.transform = `translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(89.99deg) rotateZ(0deg) scale(${params.shadowScale})`;
  123. } else {
  124. const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
  125. const multiplier = 1.5 - (Math.sin(shadowAngle * 2 * Math.PI / 360) / 2 + Math.cos(shadowAngle * 2 * Math.PI / 360) / 2);
  126. const scale1 = params.shadowScale;
  127. const scale2 = params.shadowScale / multiplier;
  128. const offset = params.shadowOffset;
  129. cubeShadowEl.style.transform = `scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset}px, ${-swiperHeight / 2 / scale2}px) rotateX(-89.99deg)`;
  130. }
  131. }
  132. const zFactor = (browser.isSafari || browser.isWebView) && browser.needPerspectiveFix ? -swiperSize / 2 : 0;
  133. wrapperEl.style.transform = `translate3d(0px,0,${zFactor}px) rotateX(${r(swiper.isHorizontal() ? 0 : wrapperRotate)}deg) rotateY(${r(swiper.isHorizontal() ? -wrapperRotate : 0)}deg)`;
  134. wrapperEl.style.setProperty('--swiper-cube-translate-z', `${zFactor}px`);
  135. };
  136. const setTransition = duration => {
  137. const {
  138. el,
  139. slides
  140. } = swiper;
  141. slides.forEach(slideEl => {
  142. slideEl.style.transitionDuration = `${duration}ms`;
  143. slideEl.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(subEl => {
  144. subEl.style.transitionDuration = `${duration}ms`;
  145. });
  146. });
  147. if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
  148. const shadowEl = el.querySelector('.swiper-cube-shadow');
  149. if (shadowEl) shadowEl.style.transitionDuration = `${duration}ms`;
  150. }
  151. };
  152. effectInit({
  153. effect: 'cube',
  154. swiper,
  155. on,
  156. setTranslate,
  157. setTransition,
  158. recreateShadows,
  159. getEffectParams: () => swiper.params.cubeEffect,
  160. perspective: () => true,
  161. overwriteParams: () => ({
  162. slidesPerView: 1,
  163. slidesPerGroup: 1,
  164. watchSlidesProgress: true,
  165. resistanceRatio: 0,
  166. spaceBetween: 0,
  167. centeredSlides: false,
  168. virtualTranslate: true
  169. })
  170. });
  171. }
  172. export { EffectCube as default };