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 { g as getSlideTransformEl, o as getRotateFix } from '../shared/utils.mjs'; function EffectCreative(_ref) { let { swiper, extendParams, on } = _ref; extendParams({ creativeEffect: { limitProgress: 1, shadowPerProgress: false, progressMultiplier: 1, perspective: true, prev: { translate: [0, 0, 0], rotate: [0, 0, 0], opacity: 1, scale: 1 }, next: { translate: [0, 0, 0], rotate: [0, 0, 0], opacity: 1, scale: 1 } } }); const getTranslateValue = value => { if (typeof value === 'string') return value; return `${value}px`; }; const setTranslate = () => { const { slides, wrapperEl, slidesSizesGrid } = swiper; const params = swiper.params.creativeEffect; const { progressMultiplier: multiplier } = params; const isCenteredSlides = swiper.params.centeredSlides; const rotateFix = getRotateFix(swiper); if (isCenteredSlides) { const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0; wrapperEl.style.transform = `translateX(calc(50% - ${margin}px))`; } for (let i = 0; i < slides.length; i += 1) { const slideEl = slides[i]; const slideProgress = slideEl.progress; const progress = Math.min(Math.max(slideEl.progress, -params.limitProgress), params.limitProgress); let originalProgress = progress; if (!isCenteredSlides) { originalProgress = Math.min(Math.max(slideEl.originalProgress, -params.limitProgress), params.limitProgress); } const offset = slideEl.swiperSlideOffset; const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0]; const r = [0, 0, 0]; let custom = false; if (!swiper.isHorizontal()) { t[1] = t[0]; t[0] = 0; } let data = { translate: [0, 0, 0], rotate: [0, 0, 0], scale: 1, opacity: 1 }; if (progress < 0) { data = params.next; custom = true; } else if (progress > 0) { data = params.prev; custom = true; } // set translate t.forEach((value, index) => { t[index] = `calc(${value}px + (${getTranslateValue(data.translate[index])} * ${Math.abs(progress * multiplier)}))`; }); // set rotates r.forEach((value, index) => { let val = data.rotate[index] * Math.abs(progress * multiplier); r[index] = val; }); slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length; const translateString = t.join(', '); const rotateString = `rotateX(${rotateFix(r[0])}deg) rotateY(${rotateFix(r[1])}deg) rotateZ(${rotateFix(r[2])}deg)`; const scaleString = originalProgress < 0 ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})` : `scale(${1 - (1 - data.scale) * originalProgress * multiplier})`; const opacityString = originalProgress < 0 ? 1 + (1 - data.opacity) * originalProgress * multiplier : 1 - (1 - data.opacity) * originalProgress * multiplier; const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`; // Set shadows if (custom && data.shadow || !custom) { let shadowEl = slideEl.querySelector('.swiper-slide-shadow'); if (!shadowEl && data.shadow) { shadowEl = createShadow('creative', slideEl); } if (shadowEl) { const shadowOpacity = params.shadowPerProgress ? progress * (1 / params.limitProgress) : progress; shadowEl.style.opacity = Math.min(Math.max(Math.abs(shadowOpacity), 0), 1); } } const targetEl = effectTarget(params, slideEl); targetEl.style.transform = transform; targetEl.style.opacity = opacityString; if (data.origin) { targetEl.style.transformOrigin = data.origin; } } }; const setTransition = duration => { const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl)); transformElements.forEach(el => { el.style.transitionDuration = `${duration}ms`; el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => { shadowEl.style.transitionDuration = `${duration}ms`; }); }); effectVirtualTransitionEnd({ swiper, duration, transformElements, allSlides: true }); }; effectInit({ effect: 'creative', swiper, on, setTranslate, setTransition, perspective: () => swiper.params.creativeEffect.perspective, overwriteParams: () => ({ watchSlidesProgress: true, virtualTranslate: !swiper.params.cssMode }) }); } export { EffectCreative as default };