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 | import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
|
5 | export default function EffectCards({
|
6 | swiper,
|
7 | extendParams,
|
8 | on
|
9 | }) {
|
10 | extendParams({
|
11 | cardsEffect: {
|
12 | slideShadows: true,
|
13 | transformEl: null,
|
14 | rotate: true,
|
15 | perSlideRotate: 2,
|
16 | perSlideOffset: 8
|
17 | }
|
18 | });
|
19 |
|
20 | const setTranslate = () => {
|
21 | const {
|
22 | slides,
|
23 | activeIndex
|
24 | } = swiper;
|
25 | const params = swiper.params.cardsEffect;
|
26 | const {
|
27 | startTranslate,
|
28 | isTouched
|
29 | } = swiper.touchEventsData;
|
30 | const currentTranslate = swiper.translate;
|
31 |
|
32 | for (let i = 0; i < slides.length; i += 1) {
|
33 | const $slideEl = slides.eq(i);
|
34 | const slideProgress = $slideEl[0].progress;
|
35 | const progress = Math.min(Math.max(slideProgress, -4), 4);
|
36 | let offset = $slideEl[0].swiperSlideOffset;
|
37 |
|
38 | if (swiper.params.centeredSlides && !swiper.params.cssMode) {
|
39 | swiper.$wrapperEl.transform(`translateX(${swiper.minTranslate()}px)`);
|
40 | }
|
41 |
|
42 | if (swiper.params.centeredSlides && swiper.params.cssMode) {
|
43 | offset -= slides[0].swiperSlideOffset;
|
44 | }
|
45 |
|
46 | let tX = swiper.params.cssMode ? -offset - swiper.translate : -offset;
|
47 | let tY = 0;
|
48 | const tZ = -100 * Math.abs(progress);
|
49 | let scale = 1;
|
50 | let rotate = -params.perSlideRotate * progress;
|
51 | let tXAdd = params.perSlideOffset - Math.abs(progress) * 0.75;
|
52 | const slideIndex = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.from + i : i;
|
53 | const isSwipeToNext = (slideIndex === activeIndex || slideIndex === activeIndex - 1) && progress > 0 && progress < 1 && (isTouched || swiper.params.cssMode) && currentTranslate < startTranslate;
|
54 | const isSwipeToPrev = (slideIndex === activeIndex || slideIndex === activeIndex + 1) && progress < 0 && progress > -1 && (isTouched || swiper.params.cssMode) && currentTranslate > startTranslate;
|
55 |
|
56 | if (isSwipeToNext || isSwipeToPrev) {
|
57 | const subProgress = (1 - Math.abs((Math.abs(progress) - 0.5) / 0.5)) ** 0.5;
|
58 | rotate += -28 * progress * subProgress;
|
59 | scale += -0.5 * subProgress;
|
60 | tXAdd += 96 * subProgress;
|
61 | tY = `${-25 * subProgress * Math.abs(progress)}%`;
|
62 | }
|
63 |
|
64 | if (progress < 0) {
|
65 |
|
66 | tX = `calc(${tX}px + (${tXAdd * Math.abs(progress)}%))`;
|
67 | } else if (progress > 0) {
|
68 |
|
69 | tX = `calc(${tX}px + (-${tXAdd * Math.abs(progress)}%))`;
|
70 | } else {
|
71 | tX = `${tX}px`;
|
72 | }
|
73 |
|
74 | if (!swiper.isHorizontal()) {
|
75 | const prevY = tY;
|
76 | tY = tX;
|
77 | tX = prevY;
|
78 | }
|
79 |
|
80 | const scaleString = progress < 0 ? `${1 + (1 - scale) * progress}` : `${1 - (1 - scale) * progress}`;
|
81 | const transform = `
|
82 | translate3d(${tX}, ${tY}, ${tZ}px)
|
83 | rotateZ(${params.rotate ? rotate : 0}deg)
|
84 | scale(${scaleString})
|
85 | `;
|
86 |
|
87 | if (params.slideShadows) {
|
88 |
|
89 | let $shadowEl = $slideEl.find('.swiper-slide-shadow');
|
90 |
|
91 | if ($shadowEl.length === 0) {
|
92 | $shadowEl = createShadow(params, $slideEl);
|
93 | }
|
94 |
|
95 | if ($shadowEl.length) $shadowEl[0].style.opacity = Math.min(Math.max((Math.abs(progress) - 0.5) / 0.5, 0), 1);
|
96 | }
|
97 |
|
98 | $slideEl[0].style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
|
99 | const $targetEl = effectTarget(params, $slideEl);
|
100 | $targetEl.transform(transform);
|
101 | }
|
102 | };
|
103 |
|
104 | const setTransition = duration => {
|
105 | const {
|
106 | transformEl
|
107 | } = swiper.params.cardsEffect;
|
108 | const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
|
109 | $transitionElements.transition(duration).find('.swiper-slide-shadow').transition(duration);
|
110 | effectVirtualTransitionEnd({
|
111 | swiper,
|
112 | duration,
|
113 | transformEl
|
114 | });
|
115 | };
|
116 |
|
117 | effectInit({
|
118 | effect: 'cards',
|
119 | swiper,
|
120 | on,
|
121 | setTranslate,
|
122 | setTransition,
|
123 | perspective: () => true,
|
124 | overwriteParams: () => ({
|
125 | watchSlidesProgress: true,
|
126 | virtualTranslate: !swiper.params.cssMode
|
127 | })
|
128 | });
|
129 | } |
\ | No newline at end of file |