swiper/modules/effect-fade.mjs

Most modern mobile touch slider and framework with hardware accelerated transitions

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 } from '../shared/utils.mjs';

const EffectFade = ({ swiper, extendParams, on }) => {
    extendParams({
        fadeEffect: {
            crossFade: false,
        },
    });
    function getParams() {
        return swiper.params.fadeEffect;
    }
    const setTranslate = () => {
        const { slides } = swiper;
        const params = getParams();
        for (let i = 0; i < slides.length; i += 1) {
            const slideEl = slides[i];
            const offset = slideEl.swiperSlideOffset ?? 0;
            let tx = -offset;
            if (!swiper.params.virtualTranslate)
                tx -= swiper.translate;
            let ty = 0;
            if (!swiper.isHorizontal()) {
                ty = tx;
                tx = 0;
            }
            const slideProgress = slideEl.progress ?? 0;
            const slideOpacity = params.crossFade
                ? Math.max(1 - Math.abs(slideProgress), 0)
                : 1 + Math.min(Math.max(slideProgress, -1), 0);
            const targetEl = effectTarget(params, slideEl);
            targetEl.style.opacity = String(slideOpacity);
            targetEl.style.transform = `translate3d(${tx}px, ${ty}px, 0px)`;
        }
    };
    const setTransition = (duration) => {
        const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
        transformElements.forEach((el) => {
            el.style.transitionDuration = `${duration}ms`;
        });
        effectVirtualTransitionEnd({ swiper, duration, transformElements, allSlides: true });
    };
    effectInit({
        effect: 'fade',
        swiper,
        on,
        setTranslate,
        setTransition,
        overwriteParams: () => ({
            slidesPerView: 1,
            slidesPerGroup: 1,
            watchSlidesProgress: true,
            spaceBetween: 0,
            virtualTranslate: !swiper.params.cssMode,
        }),
    });
};

export { EffectFade as default };