fix(controller): fix 2 way control in element

fixes #7628
nolimits4web · Jul 23, 2024 · 6eec16b · 6eec16b
1 parent e374e06
commit 6eec16b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/modules/controller/controller.mjs b/src/modules/controller/controller.mjs
@@ -154,17 +154,26 @@ export default function Controller({ swiper, extendParams, on }) {
       (typeof swiper.params.controller.control === 'string' ||
         swiper.params.controller.control instanceof HTMLElement)
     ) {
-      const controlElement = document.querySelector(swiper.params.controller.control);
-      if (controlElement && controlElement.swiper) {
-        swiper.controller.control = controlElement.swiper;
-      } else if (controlElement) {
-        const onControllerSwiper = (e) => {
-          swiper.controller.control = e.detail[0];
-          swiper.update();
-          controlElement.removeEventListener('init', onControllerSwiper);
-        };
-        controlElement.addEventListener('init', onControllerSwiper);
-      }
+      const controlElements =
+        typeof swiper.params.controller.control === 'string'
+          ? [...document.querySelectorAll(swiper.params.controller.control)]
+          : [swiper.params.controller.control];
+
+      controlElements.forEach((controlElement) => {
+        if (!swiper.controller.control) swiper.controller.control = [];
+        if (controlElement && controlElement.swiper) {
+          swiper.controller.control.push(controlElement.swiper);
+        } else if (controlElement) {
+          const eventName = `${swiper.params.eventsPrefix}init`;
+          const onControllerSwiper = (e) => {
+            swiper.controller.control.push(e.detail[0]);
+            swiper.update();
+            controlElement.removeEventListener(eventName, onControllerSwiper);
+          };
+          controlElement.addEventListener(eventName, onControllerSwiper);
+        }
+      });
+
       return;
     }
     swiper.controller.control = swiper.params.controller.control;

diff --git a/src/modules/thumbs/thumbs.mjs b/src/modules/thumbs/thumbs.mjs
@@ -173,15 +173,16 @@ export default function Thumb({ swiper, extendParams, on }) {
           init();
           update(true);
         } else if (thumbsElement) {
+          const eventName = `${swiper.params.eventsPrefix}init`;
           const onThumbsSwiper = (e) => {
             thumbs.swiper = e.detail[0];
-            thumbsElement.removeEventListener('init', onThumbsSwiper);
+            thumbsElement.removeEventListener(eventName, onThumbsSwiper);
             init();
             update(true);
             thumbs.swiper.update();
             swiper.update();
           };
-          thumbsElement.addEventListener('init', onThumbsSwiper);
+          thumbsElement.addEventListener(eventName, onThumbsSwiper);
         }
         return thumbsElement;
       };