首次提交

zhuguifei

2025-07-25 85a15646ffe20ed2bbb2042ec500df8c850a69cc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
export default function Panorama({ 
    swiper, 
    extendParams, 
    on 
}) { 
    extendParams({ 
        panorama: { 
            depth: 200, 
            rotate: 30, 
            stretch: 1 
        }, 
    }); 
 
    on('beforeInit', () => { 
        if (swiper.params.effect !== 'panorama') return; 
        swiper.classNames.push(`${swiper.params.containerModifierClass}panorama`); 
        swiper.classNames.push(`${swiper.params.containerModifierClass}3d`); 
        const overwriteParams = { 
            watchSlidesProgress: true, 
        }; 
        Object.assign(swiper.params, overwriteParams); 
        Object.assign(swiper.originalParams, overwriteParams); 
    }); 
 
    on('progress', () => { 
        if (swiper.params.effect !== 'panorama') return; 
        const sizesGrid = swiper.slidesSizesGrid; 
        const { 
            depth = 200, rotate = 30, stretch = 1 
        } = swiper.params.panorama; 
        const angleRad = (rotate * Math.PI) / 180; 
        const halfAngleRad = angleRad / 2; 
        const angleModifier = 1 / (180 / rotate); 
 
        for (let i = 0; i < swiper.slides.length; i += 1) { 
            const slideEl = swiper.slides[i]; 
            const slideProgress = slideEl.progress; 
            const slideSize = sizesGrid[i]; 
            const progressModifier = swiper.params.centeredSlides ? 
                0 : 
                (swiper.params.slidesPerView - 1) * 0.5; 
            const modifiedProgress = slideProgress + progressModifier; 
            const angleCos = 1 - Math.cos(modifiedProgress * angleModifier * Math.PI); 
            const translateX = `${modifiedProgress * (stretch * slideSize / 3) * angleCos}px`; 
            const rotateY = modifiedProgress * rotate; 
            const radius = (slideSize * 0.5) / Math.sin(halfAngleRad); 
            const translateZ = `${radius * angleCos - depth}px`; 
            slideEl.transform( 
                `translateX(${translateX}) translateZ(${translateZ}) rotateY(${rotateY}deg)`); 
            if (swiper.params.willChange) { 
                slideEl.willChange("transform"); 
            } 
            slideEl.addClass('swiper-slide-panorama') 
        } 
    }); 
 
    on('setTransition', (s, duration) => { 
        if (swiper.params.effect !== 'panorama') return; 
        swiper.slides.forEach((slideEl) => { 
            slideEl.transition(duration); 
        }); 
    }); 
}