123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- 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 } 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 };
|