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;
  };