Skip to content

Commit

Permalink
fix(element): fix parallax on elements passed to component root
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 8, 2023
1 parent db5b5d6 commit 265e466
Showing 1 changed file with 15 additions and 12 deletions.
27 changes: 15 additions & 12 deletions src/modules/parallax/parallax.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ export default function Parallax({ swiper, extendParams, on }) {
enabled: false,
},
});
const elementsSelector =
'[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]';

const setTransform = (el, progress) => {
const { rtl } = swiper;
Expand Down Expand Up @@ -58,11 +60,12 @@ export default function Parallax({ swiper, extendParams, on }) {
};

const setTranslate = () => {
const { el, slides, progress, snapGrid } = swiper;
elementChildren(
el,
'[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]',
).forEach((subEl) => {
const { el, slides, progress, snapGrid, isElement } = swiper;
const elements = elementChildren(el, elementsSelector);
if (swiper.isElement) {
elements.push(...elementChildren(swiper.hostEl, elementsSelector));
}
elements.forEach((subEl) => {
setTransform(subEl, progress);
});

Expand All @@ -73,20 +76,20 @@ export default function Parallax({ swiper, extendParams, on }) {
}
slideProgress = Math.min(Math.max(slideProgress, -1), 1);
slideEl
.querySelectorAll(
'[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale], [data-swiper-parallax-rotate]',
)
.querySelectorAll(`${elementsSelector}, [data-swiper-parallax-rotate]`)
.forEach((subEl) => {
setTransform(subEl, slideProgress);
});
});
};

const setTransition = (duration = swiper.params.speed) => {
const { el } = swiper;
el.querySelectorAll(
'[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]',
).forEach((parallaxEl) => {
const { el, hostEl } = swiper;
const elements = [...el.querySelectorAll(elementsSelector)];
if (swiper.isElement) {
elements.push(...hostEl.querySelectorAll(elementsSelector));
}
elements.forEach((parallaxEl) => {
let parallaxDuration =
parseInt(parallaxEl.getAttribute('data-swiper-parallax-duration'), 10) || duration;
if (duration === 0) parallaxDuration = 0;
Expand Down

0 comments on commit 265e466

Please sign in to comment.