fix(element): fix parallax on elements passed to component root

nolimits4web · Aug 8, 2023 · 265e466 · 265e466
1 parent db5b5d6
commit 265e466
Showing 1 changed file with 15 additions and 12 deletions.
diff --git a/src/modules/parallax/parallax.mjs b/src/modules/parallax/parallax.mjs
@@ -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;
@@ -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);
     });
 
@@ -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;