From 6eec16bfe1f103bd19bad6dec0a7aa3fb3ee2bb1 Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Tue, 23 Jul 2024 18:58:53 +0300
Subject: [PATCH] fix(controller): fix 2 way control in element

fixes #7628
---
 src/modules/controller/controller.mjs | 31 +++++++++++++++++----------
 src/modules/thumbs/thumbs.mjs         |  5 +++--
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/modules/controller/controller.mjs b/src/modules/controller/controller.mjs
index cde06dcdf..13cbe7f2b 100644
--- 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
index f1d1accee..5f35fc73b 100644
--- 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;
       };