swiper/modules/effect-flip.mjs

Most modern mobile touch slider and framework with hardware accelerated transitions

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 { p as getSlideTransformEl, o as getRotateFix } from '../shared/utils.mjs';

const EffectFlip = ({ swiper, extendParams, on }) => {
    extendParams({
        flipEffect: {
            slideShadows: true,
            limitRotation: true,
        },
    });
    function getParams() {
        return swiper.params.flipEffect;
    }
    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 = String(Math.max(-progress, 0));
        if (shadowAfter)
            shadowAfter.style.opacity = String(Math.max(progress, 0));
    };
    const recreateShadows = () => {
        // Set shadows
        const params = getParams();
        swiper.slides.forEach((slideEl) => {
            let progress = slideEl.progress ?? 0;
            if (params.limitRotation) {
                progress = Math.max(Math.min(progress, 1), -1);
            }
            createSlideShadows(slideEl, progress);
        });
    };
    const setTranslate = () => {
        const { slides, rtlTranslate: rtl } = swiper;
        const params = getParams();
        const rotateFix = getRotateFix(swiper);
        for (let i = 0; i < slides.length; i += 1) {
            const slideEl = slides[i];
            let progress = slideEl.progress ?? 0;
            if (params.limitRotation) {
                progress = Math.max(Math.min(progress, 1), -1);
            }
            const offset = slideEl.swiperSlideOffset ?? 0;
            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;
            }
            slideEl.style.zIndex = String(-Math.abs(Math.round(progress)) + slides.length);
            if (params.slideShadows) {
                createSlideShadows(slideEl, progress);
            }
            const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateFix(rotateX)}deg) rotateY(${rotateFix(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 };