1 | import $ from '../../shared/dom.js';
|
2 | export default function Parallax({
|
3 | swiper,
|
4 | extendParams,
|
5 | on
|
6 | }) {
|
7 | extendParams({
|
8 | parallax: {
|
9 | enabled: false
|
10 | }
|
11 | });
|
12 |
|
13 | const setTransform = (el, progress) => {
|
14 | const {
|
15 | rtl
|
16 | } = swiper;
|
17 | const $el = $(el);
|
18 | const rtlFactor = rtl ? -1 : 1;
|
19 | const p = $el.attr('data-swiper-parallax') || '0';
|
20 | let x = $el.attr('data-swiper-parallax-x');
|
21 | let y = $el.attr('data-swiper-parallax-y');
|
22 | const scale = $el.attr('data-swiper-parallax-scale');
|
23 | const opacity = $el.attr('data-swiper-parallax-opacity');
|
24 |
|
25 | if (x || y) {
|
26 | x = x || '0';
|
27 | y = y || '0';
|
28 | } else if (swiper.isHorizontal()) {
|
29 | x = p;
|
30 | y = '0';
|
31 | } else {
|
32 | y = p;
|
33 | x = '0';
|
34 | }
|
35 |
|
36 | if (x.indexOf('%') >= 0) {
|
37 | x = `${parseInt(x, 10) * progress * rtlFactor}%`;
|
38 | } else {
|
39 | x = `${x * progress * rtlFactor}px`;
|
40 | }
|
41 |
|
42 | if (y.indexOf('%') >= 0) {
|
43 | y = `${parseInt(y, 10) * progress}%`;
|
44 | } else {
|
45 | y = `${y * progress}px`;
|
46 | }
|
47 |
|
48 | if (typeof opacity !== 'undefined' && opacity !== null) {
|
49 | const currentOpacity = opacity - (opacity - 1) * (1 - Math.abs(progress));
|
50 | $el[0].style.opacity = currentOpacity;
|
51 | }
|
52 |
|
53 | if (typeof scale === 'undefined' || scale === null) {
|
54 | $el.transform(`translate3d(${x}, ${y}, 0px)`);
|
55 | } else {
|
56 | const currentScale = scale - (scale - 1) * (1 - Math.abs(progress));
|
57 | $el.transform(`translate3d(${x}, ${y}, 0px) scale(${currentScale})`);
|
58 | }
|
59 | };
|
60 |
|
61 | const setTranslate = () => {
|
62 | const {
|
63 | $el,
|
64 | slides,
|
65 | progress,
|
66 | snapGrid
|
67 | } = swiper;
|
68 | $el.children('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').each(el => {
|
69 | setTransform(el, progress);
|
70 | });
|
71 | slides.each((slideEl, slideIndex) => {
|
72 | let slideProgress = slideEl.progress;
|
73 |
|
74 | if (swiper.params.slidesPerGroup > 1 && swiper.params.slidesPerView !== 'auto') {
|
75 | slideProgress += Math.ceil(slideIndex / 2) - progress * (snapGrid.length - 1);
|
76 | }
|
77 |
|
78 | slideProgress = Math.min(Math.max(slideProgress, -1), 1);
|
79 | $(slideEl).find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').each(el => {
|
80 | setTransform(el, slideProgress);
|
81 | });
|
82 | });
|
83 | };
|
84 |
|
85 | const setTransition = (duration = swiper.params.speed) => {
|
86 | const {
|
87 | $el
|
88 | } = swiper;
|
89 | $el.find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').each(parallaxEl => {
|
90 | const $parallaxEl = $(parallaxEl);
|
91 | let parallaxDuration = parseInt($parallaxEl.attr('data-swiper-parallax-duration'), 10) || duration;
|
92 | if (duration === 0) parallaxDuration = 0;
|
93 | $parallaxEl.transition(parallaxDuration);
|
94 | });
|
95 | };
|
96 |
|
97 | on('beforeInit', () => {
|
98 | if (!swiper.params.parallax.enabled) return;
|
99 | swiper.params.watchSlidesProgress = true;
|
100 | swiper.originalParams.watchSlidesProgress = true;
|
101 | });
|
102 | on('init', () => {
|
103 | if (!swiper.params.parallax.enabled) return;
|
104 | setTranslate();
|
105 | });
|
106 | on('setTranslate', () => {
|
107 | if (!swiper.params.parallax.enabled) return;
|
108 | setTranslate();
|
109 | });
|
110 | on('setTransition', (_swiper, duration) => {
|
111 | if (!swiper.params.parallax.enabled) return;
|
112 | setTransition(duration);
|
113 | });
|
114 | } |
\ | No newline at end of file |