effect-flip.mjs 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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, o as getRotateFix } from '../shared/utils.mjs';
  6. function EffectFlip(_ref) {
  7. let {
  8. swiper,
  9. extendParams,
  10. on
  11. } = _ref;
  12. extendParams({
  13. flipEffect: {
  14. slideShadows: true,
  15. limitRotation: true
  16. }
  17. });
  18. const createSlideShadows = (slideEl, progress) => {
  19. let shadowBefore = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');
  20. let shadowAfter = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');
  21. if (!shadowBefore) {
  22. shadowBefore = createShadow('flip', slideEl, swiper.isHorizontal() ? 'left' : 'top');
  23. }
  24. if (!shadowAfter) {
  25. shadowAfter = createShadow('flip', slideEl, swiper.isHorizontal() ? 'right' : 'bottom');
  26. }
  27. if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0);
  28. if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0);
  29. };
  30. const recreateShadows = () => {
  31. // Set shadows
  32. swiper.params.flipEffect;
  33. swiper.slides.forEach(slideEl => {
  34. let progress = slideEl.progress;
  35. if (swiper.params.flipEffect.limitRotation) {
  36. progress = Math.max(Math.min(slideEl.progress, 1), -1);
  37. }
  38. createSlideShadows(slideEl, progress);
  39. });
  40. };
  41. const setTranslate = () => {
  42. const {
  43. slides,
  44. rtlTranslate: rtl
  45. } = swiper;
  46. const params = swiper.params.flipEffect;
  47. const rotateFix = getRotateFix(swiper);
  48. for (let i = 0; i < slides.length; i += 1) {
  49. const slideEl = slides[i];
  50. let progress = slideEl.progress;
  51. if (swiper.params.flipEffect.limitRotation) {
  52. progress = Math.max(Math.min(slideEl.progress, 1), -1);
  53. }
  54. const offset = slideEl.swiperSlideOffset;
  55. const rotate = -180 * progress;
  56. let rotateY = rotate;
  57. let rotateX = 0;
  58. let tx = swiper.params.cssMode ? -offset - swiper.translate : -offset;
  59. let ty = 0;
  60. if (!swiper.isHorizontal()) {
  61. ty = tx;
  62. tx = 0;
  63. rotateX = -rotateY;
  64. rotateY = 0;
  65. } else if (rtl) {
  66. rotateY = -rotateY;
  67. }
  68. slideEl.style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
  69. if (params.slideShadows) {
  70. createSlideShadows(slideEl, progress);
  71. }
  72. const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateFix(rotateX)}deg) rotateY(${rotateFix(rotateY)}deg)`;
  73. const targetEl = effectTarget(params, slideEl);
  74. targetEl.style.transform = transform;
  75. }
  76. };
  77. const setTransition = duration => {
  78. const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
  79. transformElements.forEach(el => {
  80. el.style.transitionDuration = `${duration}ms`;
  81. el.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => {
  82. shadowEl.style.transitionDuration = `${duration}ms`;
  83. });
  84. });
  85. effectVirtualTransitionEnd({
  86. swiper,
  87. duration,
  88. transformElements
  89. });
  90. };
  91. effectInit({
  92. effect: 'flip',
  93. swiper,
  94. on,
  95. setTranslate,
  96. setTransition,
  97. recreateShadows,
  98. getEffectParams: () => swiper.params.flipEffect,
  99. perspective: () => true,
  100. overwriteParams: () => ({
  101. slidesPerView: 1,
  102. slidesPerGroup: 1,
  103. watchSlidesProgress: true,
  104. spaceBetween: 0,
  105. virtualTranslate: !swiper.params.cssMode
  106. })
  107. });
  108. }
  109. export { EffectFlip as default };