1 | import createShadow from '../../shared/create-shadow.js';
|
2 | import effectInit from '../../shared/effect-init.js';
|
3 | import effectTarget from '../../shared/effect-target.js';
|
4 | export default function EffectCoverflow({
|
5 | swiper,
|
6 | extendParams,
|
7 | on
|
8 | }) {
|
9 | extendParams({
|
10 | coverflowEffect: {
|
11 | rotate: 50,
|
12 | stretch: 0,
|
13 | depth: 100,
|
14 | scale: 1,
|
15 | modifier: 1,
|
16 | slideShadows: true,
|
17 | transformEl: null
|
18 | }
|
19 | });
|
20 |
|
21 | const setTranslate = () => {
|
22 | const {
|
23 | width: swiperWidth,
|
24 | height: swiperHeight,
|
25 | slides,
|
26 | slidesSizesGrid
|
27 | } = swiper;
|
28 | const params = swiper.params.coverflowEffect;
|
29 | const isHorizontal = swiper.isHorizontal();
|
30 | const transform = swiper.translate;
|
31 | const center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
|
32 | const rotate = isHorizontal ? params.rotate : -params.rotate;
|
33 | const translate = params.depth;
|
34 |
|
35 | for (let i = 0, length = slides.length; i < length; i += 1) {
|
36 | const $slideEl = slides.eq(i);
|
37 | const slideSize = slidesSizesGrid[i];
|
38 | const slideOffset = $slideEl[0].swiperSlideOffset;
|
39 | const centerOffset = (center - slideOffset - slideSize / 2) / slideSize;
|
40 | const offsetMultiplier = typeof params.modifier === 'function' ? params.modifier(centerOffset) : centerOffset * params.modifier;
|
41 | let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
|
42 | let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
|
43 |
|
44 | let translateZ = -translate * Math.abs(offsetMultiplier);
|
45 | let stretch = params.stretch;
|
46 |
|
47 | if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
|
48 | stretch = parseFloat(params.stretch) / 100 * slideSize;
|
49 | }
|
50 |
|
51 | let translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
|
52 | let translateX = isHorizontal ? stretch * offsetMultiplier : 0;
|
53 | let scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier);
|
54 |
|
55 | if (Math.abs(translateX) < 0.001) translateX = 0;
|
56 | if (Math.abs(translateY) < 0.001) translateY = 0;
|
57 | if (Math.abs(translateZ) < 0.001) translateZ = 0;
|
58 | if (Math.abs(rotateY) < 0.001) rotateY = 0;
|
59 | if (Math.abs(rotateX) < 0.001) rotateX = 0;
|
60 | if (Math.abs(scale) < 0.001) scale = 0;
|
61 | const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
|
62 | const $targetEl = effectTarget(params, $slideEl);
|
63 | $targetEl.transform(slideTransform);
|
64 | $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
|
65 |
|
66 | if (params.slideShadows) {
|
67 |
|
68 | let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
|
69 | let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
|
70 |
|
71 | if ($shadowBeforeEl.length === 0) {
|
72 | $shadowBeforeEl = createShadow(params, $slideEl, isHorizontal ? 'left' : 'top');
|
73 | }
|
74 |
|
75 | if ($shadowAfterEl.length === 0) {
|
76 | $shadowAfterEl = createShadow(params, $slideEl, isHorizontal ? 'right' : 'bottom');
|
77 | }
|
78 |
|
79 | if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
|
80 | if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
|
81 | }
|
82 | }
|
83 | };
|
84 |
|
85 | const setTransition = duration => {
|
86 | const {
|
87 | transformEl
|
88 | } = swiper.params.coverflowEffect;
|
89 | const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
|
90 | $transitionElements.transition(duration).find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').transition(duration);
|
91 | };
|
92 |
|
93 | effectInit({
|
94 | effect: 'coverflow',
|
95 | swiper,
|
96 | on,
|
97 | setTranslate,
|
98 | setTransition,
|
99 | perspective: () => true,
|
100 | overwriteParams: () => ({
|
101 | watchSlidesProgress: true
|
102 | })
|
103 | });
|
104 | } |
\ | No newline at end of file |