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 EffectCards(_ref) { let { swiper, extendParams, on } = _ref; extendParams({ cardsEffect: { slideShadows: true, rotate: true, perSlideRotate: 2, perSlideOffset: 8 } }); const setTranslate = () => { const { slides, activeIndex, rtlTranslate: rtl } = swiper; const params = swiper.params.cardsEffect; const { startTranslate, isTouched } = swiper.touchEventsData; const currentTranslate = rtl ? -swiper.translate : swiper.translate; for (let i = 0; i < slides.length; i += 1) { const slideEl = slides[i]; const slideProgress = slideEl.progress; const progress = Math.min(Math.max(slideProgress, -4), 4); let offset = slideEl.swiperSlideOffset; if (swiper.params.centeredSlides && !swiper.params.cssMode) { swiper.wrapperEl.style.transform = `translateX(${swiper.minTranslate()}px)`; } if (swiper.params.centeredSlides && swiper.params.cssMode) { offset -= slides[0].swiperSlideOffset; } let tX = swiper.params.cssMode ? -offset - swiper.translate : -offset; let tY = 0; const tZ = -100 * Math.abs(progress); let scale = 1; let rotate = -params.perSlideRotate * progress; let tXAdd = params.perSlideOffset - Math.abs(progress) * 0.75; const slideIndex = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.from + i : i; const isSwipeToNext = (slideIndex === activeIndex || slideIndex === activeIndex - 1) && progress > 0 && progress < 1 && (isTouched || swiper.params.cssMode) && currentTranslate < startTranslate; const isSwipeToPrev = (slideIndex === activeIndex || slideIndex === activeIndex + 1) && progress < 0 && progress > -1 && (isTouched || swiper.params.cssMode) && currentTranslate > startTranslate; if (isSwipeToNext || isSwipeToPrev) { const subProgress = (1 - Math.abs((Math.abs(progress) - 0.5) / 0.5)) ** 0.5; rotate += -28 * progress * subProgress; scale += -0.5 * subProgress; tXAdd += 96 * subProgress; tY = `${-25 * subProgress * Math.abs(progress)}%`; } if (progress < 0) { // next tX = `calc(${tX}px ${rtl ? '-' : '+'} (${tXAdd * Math.abs(progress)}%))`; } else if (progress > 0) { // prev tX = `calc(${tX}px ${rtl ? '-' : '+'} (-${tXAdd * Math.abs(progress)}%))`; } else { tX = `${tX}px`; } if (!swiper.isHorizontal()) { const prevY = tY; tY = tX; tX = prevY; } const scaleString = progress < 0 ? `${1 + (1 - scale) * progress}` : `${1 - (1 - scale) * progress}`; /* eslint-disable */ const transform = ` translate3d(${tX}, ${tY}, ${tZ}px) rotateZ(${params.rotate ? rtl ? -rotate : rotate : 0}deg) scale(${scaleString}) `; /* eslint-enable */ if (params.slideShadows) { // Set shadows let shadowEl = slideEl.querySelector('.swiper-slide-shadow'); if (!shadowEl) { shadowEl = createShadow('cards', slideEl); } if (shadowEl) shadowEl.style.opacity = Math.min(Math.max((Math.abs(progress) - 0.5) / 0.5, 0), 1); } slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length; 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').forEach(shadowEl => { shadowEl.style.transitionDuration = `${duration}ms`; }); }); effectVirtualTransitionEnd({ swiper, duration, transformElements }); }; effectInit({ effect: 'cards', swiper, on, setTranslate, setTransition, perspective: () => true, overwriteParams: () => ({ watchSlidesProgress: true, virtualTranslate: !swiper.params.cssMode }) }); } export { EffectCards as default };