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