effect-flip.js 3.1 KB

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