import { c as createShadow } from '../shared/create-shadow.mjs'; import { e as effectInit } from '../shared/effect-init.mjs'; import { e as effectTarget } from '../shared/effect-target.mjs'; import { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs'; import { l as getSlideTransformEl } from '../shared/utils.mjs'; function EffectFlip(_ref) { let { swiper, extendParams, on } = _ref; extendParams({ flipEffect: { slideShadows: true, limitRotation: true } }); const createSlideShadows = (slideEl, progress) => { let shadowBefore = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top'); let shadowAfter = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom'); if (!shadowBefore) { shadowBefore = createShadow('flip', slideEl, swiper.isHorizontal() ? 'left' : 'top'); } if (!shadowAfter) { shadowAfter = createShadow('flip', slideEl, swiper.isHorizontal() ? 'right' : 'bottom'); } if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0); if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0); }; const recreateShadows = () => { // Set shadows swiper.params.flipEffect; swiper.slides.forEach(slideEl => { let progress = slideEl.progress; if (swiper.params.flipEffect.limitRotation) { progress = Math.max(Math.min(slideEl.progress, 1), -1); } createSlideShadows(slideEl, progress); }); }; const setTranslate = () => { const { slides, rtlTranslate: rtl } = swiper; const params = swiper.params.flipEffect; for (let i = 0; i < slides.length; i += 1) { const slideEl = slides[i]; let progress = slideEl.progress; if (swiper.params.flipEffect.limitRotation) { progress = Math.max(Math.min(slideEl.progress, 1), -1); } const offset = slideEl.swiperSlideOffset; const rotate = -180 * progress; let rotateY = rotate; let rotateX = 0; let tx = swiper.params.cssMode ? -offset - swiper.translate : -offset; let ty = 0; if (!swiper.isHorizontal()) { ty = tx; tx = 0; rotateX = -rotateY; rotateY = 0; } else if (rtl) { rotateY = -rotateY; } if (swiper.browser && swiper.browser.isSafari) { if (Math.abs(rotateY) / 90 % 2 === 1) { rotateY += 0.001; } if (Math.abs(rotateX) / 90 % 2 === 1) { rotateX += 0.001; } } slideEl.style.zIndex = -Math.abs(Math.round(progress)) + slides.length; if (params.slideShadows) { createSlideShadows(slideEl, progress); } const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; const targetEl = effectTarget(params, slideEl); targetEl.style.transform = transform; } }; const setTransition = duration => { const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl)); transformElements.forEach(el => { el.style.transitionDuration = `${duration}ms`; el.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => { shadowEl.style.transitionDuration = `${duration}ms`; }); }); effectVirtualTransitionEnd({ swiper, duration, transformElements }); }; effectInit({ effect: 'flip', swiper, on, setTranslate, setTransition, recreateShadows, getEffectParams: () => swiper.params.flipEffect, perspective: () => true, overwriteParams: () => ({ slidesPerView: 1, slidesPerGroup: 1, watchSlidesProgress: true, spaceBetween: 0, virtualTranslate: !swiper.params.cssMode }) }); } export { EffectFlip as default };