import { e as effectInit } from '../shared/effect-init.mjs'; import { c as createElement } from '../shared/utils.mjs'; function EffectCube(_ref) { let { swiper, extendParams, on } = _ref; extendParams({ cubeEffect: { slideShadows: true, shadow: true, shadowOffset: 20, shadowScale: 0.94 } }); const createSlideShadows = (slideEl, progress, isHorizontal) => { let shadowBefore = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top'); let shadowAfter = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom'); if (!shadowBefore) { shadowBefore = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}`.split(' ')); slideEl.append(shadowBefore); } if (!shadowAfter) { shadowAfter = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}`.split(' ')); slideEl.append(shadowAfter); } if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0); if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0); }; const recreateShadows = () => { // create new ones const isHorizontal = swiper.isHorizontal(); swiper.slides.forEach(slideEl => { const progress = Math.max(Math.min(slideEl.progress, 1), -1); createSlideShadows(slideEl, progress, isHorizontal); }); }; const setTranslate = () => { const { el, wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize, browser } = swiper; const params = swiper.params.cubeEffect; const isHorizontal = swiper.isHorizontal(); const isVirtual = swiper.virtual && swiper.params.virtual.enabled; let wrapperRotate = 0; let cubeShadowEl; if (params.shadow) { if (isHorizontal) { cubeShadowEl = swiper.wrapperEl.querySelector('.swiper-cube-shadow'); if (!cubeShadowEl) { cubeShadowEl = createElement('div', 'swiper-cube-shadow'); swiper.wrapperEl.append(cubeShadowEl); } cubeShadowEl.style.height = `${swiperWidth}px`; } else { cubeShadowEl = el.querySelector('.swiper-cube-shadow'); if (!cubeShadowEl) { cubeShadowEl = createElement('div', 'swiper-cube-shadow'); el.append(cubeShadowEl); } } } for (let i = 0; i < slides.length; i += 1) { const slideEl = slides[i]; let slideIndex = i; if (isVirtual) { slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10); } let slideAngle = slideIndex * 90; let round = Math.floor(slideAngle / 360); if (rtl) { slideAngle = -slideAngle; round = Math.floor(-slideAngle / 360); } const progress = Math.max(Math.min(slideEl.progress, 1), -1); let tx = 0; let ty = 0; let tz = 0; if (slideIndex % 4 === 0) { tx = -round * 4 * swiperSize; tz = 0; } else if ((slideIndex - 1) % 4 === 0) { tx = 0; tz = -round * 4 * swiperSize; } else if ((slideIndex - 2) % 4 === 0) { tx = swiperSize + round * 4 * swiperSize; tz = swiperSize; } else if ((slideIndex - 3) % 4 === 0) { tx = -swiperSize; tz = 3 * swiperSize + swiperSize * 4 * round; } if (rtl) { tx = -tx; } if (!isHorizontal) { ty = tx; tx = 0; } const transform = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`; if (progress <= 1 && progress > -1) { wrapperRotate = slideIndex * 90 + progress * 90; if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90; if (swiper.browser && swiper.browser.isSafari && Math.abs(wrapperRotate) / 90 % 2 === 1) { wrapperRotate += 0.001; } } slideEl.style.transform = transform; if (params.slideShadows) { createSlideShadows(slideEl, progress, isHorizontal); } } wrapperEl.style.transformOrigin = `50% 50% -${swiperSize / 2}px`; wrapperEl.style['-webkit-transform-origin'] = `50% 50% -${swiperSize / 2}px`; if (params.shadow) { if (isHorizontal) { cubeShadowEl.style.transform = `translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(89.99deg) rotateZ(0deg) scale(${params.shadowScale})`; } else { const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90; const multiplier = 1.5 - (Math.sin(shadowAngle * 2 * Math.PI / 360) / 2 + Math.cos(shadowAngle * 2 * Math.PI / 360) / 2); const scale1 = params.shadowScale; const scale2 = params.shadowScale / multiplier; const offset = params.shadowOffset; cubeShadowEl.style.transform = `scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset}px, ${-swiperHeight / 2 / scale2}px) rotateX(-89.99deg)`; } } const zFactor = (browser.isSafari || browser.isWebView) && browser.needPerspectiveFix ? -swiperSize / 2 : 0; wrapperEl.style.transform = `translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`; wrapperEl.style.setProperty('--swiper-cube-translate-z', `${zFactor}px`); }; const setTransition = duration => { const { el, slides } = swiper; slides.forEach(slideEl => { slideEl.style.transitionDuration = `${duration}ms`; slideEl.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(subEl => { subEl.style.transitionDuration = `${duration}ms`; }); }); if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) { const shadowEl = el.querySelector('.swiper-cube-shadow'); if (shadowEl) shadowEl.style.transitionDuration = `${duration}ms`; } }; effectInit({ effect: 'cube', swiper, on, setTranslate, setTransition, recreateShadows, getEffectParams: () => swiper.params.cubeEffect, perspective: () => true, overwriteParams: () => ({ slidesPerView: 1, slidesPerGroup: 1, watchSlidesProgress: true, resistanceRatio: 0, spaceBetween: 0, centeredSlides: false, virtualTranslate: true }) }); } export { EffectCube as default };