Как поменять активный элемент в галерее по свайпу в одиночном слайдере?

 let card_gallery = new Swiper(".swiper-card", {
    direction: 'vertical',
    slidesPerView: 3,
    spaceBetween: 13,
    mousewheel: true,
    scrollbar: {
      el: ".swiper-scrollbar",
      
    },
  
  });

  let single_gallery = new Swiper(".swiper-single", {
    slidesPerView: 1,
    mousewheel: true,
    navigation: {
      nextEl: ".swiper-single .swiper-button-next",
      prevEl: ".swiper-single .swiper-button-prev",
    },
  });
 
 
      card_gallery.controller.control = single_gallery;
single_gallery.controller.control = card_gallery;

card_gallery.on('click', function(swiper, e) {
  const index = swiper.slides.indexOf(e.target.closest('.swiper-slide'));
  if (index !== -1) {
    single_gallery.slideTo(index);
     $('.card__gallery .swiper-slide').removeClass('swiper-slide-active');
    $('.card__gallery .swiper-slide').eq(index).addClass('swiper-slide-active');
  }
});

.swiper-card {
    height: 260px;
    padding: 0 15px;
}

.card__gallery .swiper-slide {
    max-width: 55px;
    height: 55px;
    margin: 0 auto;
    padding: 15px;
}

.card__gallery .swiper-slide.swiper-slide-active {
  border: 1px solid red;
  
}

img {
  display: block;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.3.1/swiper-bundle.css" rel="stylesheet"/>

<div class="card__gallery">
    <div class="swiper swiper-card">
      <div class="swiper-scrollbar"></div>
<div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg">
        </div>
          <div class="swiper-slide">
          <img src="https://img.freepik.com/free-photo/wide-angle-shot-of-a-single-tree-growing-under-a-clouded-sky-during-a-sunset-surrounded-by-grass_181624-22807.jpg?size=626&ext=jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://www.5.ua/media/pictures/1140x641/188383.jpg?t=1594112566">
        </div>
          <div class="swiper-slide">
          <img src="https://icocnews.ru/wp-content/uploads/2015/09/priroda.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://zastavok.net/main/priroda/1425052561.jpg">
        </div>
      </div>
      <!--end swiper-wrapper-->
    </div>

  </div>


  <div class="swiper swiper-single">
    <div class="swiper-scrollbar"></div>
  <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg">
        </div>
          <div class="swiper-slide">
          <img src="https://img.freepik.com/free-photo/wide-angle-shot-of-a-single-tree-growing-under-a-clouded-sky-during-a-sunset-surrounded-by-grass_181624-22807.jpg?size=626&ext=jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://www.5.ua/media/pictures/1140x641/188383.jpg?t=1594112566">
        </div>
          <div class="swiper-slide">
          <img src="https://icocnews.ru/wp-content/uploads/2015/09/priroda.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://zastavok.net/main/priroda/1425052561.jpg">
        </div>
      </div>
      <!--end swiper-wrapper-->
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.3.1/swiper-bundle.min.js"></script>