effect-flip.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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 EffectFlip(_ref) {
  6. let {
  7. swiper,
  8. extendParams,
  9. on
  10. } = _ref;
  11. extendParams({
  12. flipEffect: {
  13. slideShadows: true,
  14. limitRotation: true,
  15. transformEl: null
  16. }
  17. });
  18. const setTranslate = () => {
  19. const {
  20. slides,
  21. rtlTranslate: rtl
  22. } = swiper;
  23. const params = swiper.params.flipEffect;
  24. for (let i = 0; i < slides.length; i += 1) {
  25. const $slideEl = slides.eq(i);
  26. let progress = $slideEl[0].progress;
  27. if (swiper.params.flipEffect.limitRotation) {
  28. progress = Math.max(Math.min($slideEl[0].progress, 1), -1);
  29. }
  30. const offset = $slideEl[0].swiperSlideOffset;
  31. const rotate = -180 * progress;
  32. let rotateY = rotate;
  33. let rotateX = 0;
  34. let tx = swiper.params.cssMode ? -offset - swiper.translate : -offset;
  35. let ty = 0;
  36. if (!swiper.isHorizontal()) {
  37. ty = tx;
  38. tx = 0;
  39. rotateX = -rotateY;
  40. rotateY = 0;
  41. } else if (rtl) {
  42. rotateY = -rotateY;
  43. }
  44. $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
  45. if (params.slideShadows) {
  46. // Set shadows
  47. let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
  48. let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
  49. if (shadowBefore.length === 0) {
  50. shadowBefore = createShadow(params, $slideEl, swiper.isHorizontal() ? 'left' : 'top');
  51. }
  52. if (shadowAfter.length === 0) {
  53. shadowAfter = createShadow(params, $slideEl, swiper.isHorizontal() ? 'right' : 'bottom');
  54. }
  55. if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
  56. if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
  57. }
  58. const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  59. const $targetEl = effectTarget(params, $slideEl);
  60. $targetEl.transform(transform);
  61. }
  62. };
  63. const setTransition = duration => {
  64. const {
  65. transformEl
  66. } = swiper.params.flipEffect;
  67. const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
  68. $transitionElements.transition(duration).find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').transition(duration);
  69. effectVirtualTransitionEnd({
  70. swiper,
  71. duration,
  72. transformEl
  73. });
  74. };
  75. effectInit({
  76. effect: 'flip',
  77. swiper,
  78. on,
  79. setTranslate,
  80. setTransition,
  81. perspective: () => true,
  82. overwriteParams: () => ({
  83. slidesPerView: 1,
  84. slidesPerGroup: 1,
  85. watchSlidesProgress: true,
  86. spaceBetween: 0,
  87. virtualTranslate: !swiper.params.cssMode
  88. })
  89. });
  90. }