effect-coverflow.mjs 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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 { g as getSlideTransformEl, o as getRotateFix } from '../shared/utils.mjs';
  5. function EffectCoverflow(_ref) {
  6. let {
  7. swiper,
  8. extendParams,
  9. on
  10. } = _ref;
  11. extendParams({
  12. coverflowEffect: {
  13. rotate: 50,
  14. stretch: 0,
  15. depth: 100,
  16. scale: 1,
  17. modifier: 1,
  18. slideShadows: true
  19. }
  20. });
  21. const setTranslate = () => {
  22. const {
  23. width: swiperWidth,
  24. height: swiperHeight,
  25. slides,
  26. slidesSizesGrid
  27. } = swiper;
  28. const params = swiper.params.coverflowEffect;
  29. const isHorizontal = swiper.isHorizontal();
  30. const transform = swiper.translate;
  31. const center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
  32. const rotate = isHorizontal ? params.rotate : -params.rotate;
  33. const translate = params.depth;
  34. const r = getRotateFix(swiper);
  35. // Each slide offset from center
  36. for (let i = 0, length = slides.length; i < length; i += 1) {
  37. const slideEl = slides[i];
  38. const slideSize = slidesSizesGrid[i];
  39. const slideOffset = slideEl.swiperSlideOffset;
  40. const centerOffset = (center - slideOffset - slideSize / 2) / slideSize;
  41. const offsetMultiplier = typeof params.modifier === 'function' ? params.modifier(centerOffset) : centerOffset * params.modifier;
  42. let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
  43. let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
  44. // var rotateZ = 0
  45. let translateZ = -translate * Math.abs(offsetMultiplier);
  46. let stretch = params.stretch;
  47. // Allow percentage to make a relative stretch for responsive sliders
  48. if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
  49. stretch = parseFloat(params.stretch) / 100 * slideSize;
  50. }
  51. let translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
  52. let translateX = isHorizontal ? stretch * offsetMultiplier : 0;
  53. let scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier);
  54. // Fix for ultra small values
  55. if (Math.abs(translateX) < 0.001) translateX = 0;
  56. if (Math.abs(translateY) < 0.001) translateY = 0;
  57. if (Math.abs(translateZ) < 0.001) translateZ = 0;
  58. if (Math.abs(rotateY) < 0.001) rotateY = 0;
  59. if (Math.abs(rotateX) < 0.001) rotateX = 0;
  60. if (Math.abs(scale) < 0.001) scale = 0;
  61. const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${r(rotateX)}deg) rotateY(${r(rotateY)}deg) scale(${scale})`;
  62. const targetEl = effectTarget(params, slideEl);
  63. targetEl.style.transform = slideTransform;
  64. slideEl.style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
  65. if (params.slideShadows) {
  66. // Set shadows
  67. let shadowBeforeEl = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');
  68. let shadowAfterEl = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');
  69. if (!shadowBeforeEl) {
  70. shadowBeforeEl = createShadow('coverflow', slideEl, isHorizontal ? 'left' : 'top');
  71. }
  72. if (!shadowAfterEl) {
  73. shadowAfterEl = createShadow('coverflow', slideEl, isHorizontal ? 'right' : 'bottom');
  74. }
  75. if (shadowBeforeEl) shadowBeforeEl.style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
  76. if (shadowAfterEl) shadowAfterEl.style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
  77. }
  78. }
  79. };
  80. const setTransition = duration => {
  81. const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
  82. transformElements.forEach(el => {
  83. el.style.transitionDuration = `${duration}ms`;
  84. el.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => {
  85. shadowEl.style.transitionDuration = `${duration}ms`;
  86. });
  87. });
  88. };
  89. effectInit({
  90. effect: 'coverflow',
  91. swiper,
  92. on,
  93. setTranslate,
  94. setTransition,
  95. perspective: () => true,
  96. overwriteParams: () => ({
  97. watchSlidesProgress: true
  98. })
  99. });
  100. }
  101. export { EffectCoverflow as default };