swiperサムネイル連動型スライダーで、サムネイルのactiveクラスが動かない

お世話になっております。

現在swiperを使用したサムネイル連動型スライダーを作成しております。

・メインスライダーはループ
・サムネイルはループしない　という仕様になっています。

メインスライダーを矢印で移動するとサムネイルも動き、サムネイルをクリックするとメイン画像も切り替わるのですが、
サムネイルの.swiper-slide-activeクラスが１枚目から動かず困っております。

サムネイルをクリックしてもメインスライダーを切り替えても同じく.swiper-slide-activeが移動しません。

codepenはこちらになります。
(メインスライドの見た目が汚くて申し訳ありません。。)

やってみたこと
clickイベントで手動でクラスをつけ外す　
ー＞　サムネイルをクリックしたときはうまくいくのですが、メインスライダーとの連携がかえってややこしくなり、やめました。

サムネイルスライダーをloop: true,centeredSlides: trueにする
ー＞　これだとサムネイルのactiveクラスが移動するのを確認できました。
ただ今回の仕様とは違うので、こちらもやめました。

どのようにすればサムネイルの.swiper-slide-activeクラスが移動してくれるのでしょうか。
どなたか、ご教示いただけませんでしょうか。何卒よろしくお願いいたします。

コードは以下になります。
文字数がオーバーしたため、メインスライダーのアイテム数を減らしております。

html
1<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"></head>     
2
3<section id="cafe_menu" class="bl_menu ly_section">
4        <div class="ly_inner">
5          <div class="swiper-container swiper-menu">
6            <div class="swiper-wrapper">
7              <div class="el_cb bl_menu_slideContent swiper-slide">
8                <div class="bl_menu_slideleft">
9                  <div class="bl_menu_imgWrapper">
10                    <img src="https://placehold.jp/1500x800.png" alt="">
11                  </div>
12                </div>
13                <div class="bl_menu_body fade">
14                  <h3 class="el_lv3_ttl">オリジナルコーヒー1</h3>
15                  <div class="bl_menu_txt">
16                    1説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
17                </div>
18              </div>
19              <div class="el_cb bl_menu_slideContent swiper-slide">
20                <div class="bl_menu_slideleft">
21                  <div class="bl_menu_imgWrapper">
22                    <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="">
23                  </div>
24                </div>
25                <div class="bl_menu_body fade">
26                  <h3 class="el_lv3_ttl">オリジナルコーヒー3</h3>
27                  <div class="bl_menu_txt">
28                    3説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
29                </div>
30              </div>
31              
32            </div>
33            <div class="swiper-button-prev swiper-menu-prev"></div>
34            <div class="swiper-button-next swiper-main-next"></div>
35          </div><!-- swiper-menu -->
36          <!-- swiper thumbnail -->
37          <div class="swiper-thumb-parent">
38            <div class="swiper-container swiper-menuThumb">
39              <div class="swiper-wrapper bl_img_thumbUnit">
40                <li class="swiper-slide">
41                  <div class="bl_thumb_wrapper">
42                    <img src="https://placehold.jp/1500x800.png" alt="サムネイル"></div>
43                </li>
44                <li class="swiper-slide">
45                  <div class="bl_thumb_wrapper">
46                    <img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="サムネイル"></div>
47                </li>
48                <li class="swiper-slide">
49                  <div class="bl_thumb_wrapper">
50                    <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></div>
51                </li>
52                <li class="swiper-slide">
53                  <div class="bl_thumb_wrapper">
54                    <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></div>
55                </li>
56                <li class="swiper-slide">
57                  <div class="bl_thumb_wrapper">
58                    <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></div>
59                </li>
60              </div>
61              <div class="swiper-button-prev"></div>
62              <div class="swiper-button-next"></div>  
63            </div>
64            <div class="swiper-button-prev-a"></div>
65            <div class="swiper-button-next-a"></div>
66          </div>
67          <!-- swiper thumbnail -->
68      </section><!-- /#cafe_menu .ly_section -->
69  
70  <script
71  src="https://code.jquery.com/jquery-3.5.1.min.js"
72  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
73  crossorigin="anonymous"></script>
74  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

jQuery
1$(function ($) {
2
3    // サムネイル用のスライダー
4  var thumbSlide = new Swiper('.swiper-menuThumb', {
5    slidesPerView: 'auto',
6    touchRatio: 0.2,
7    navigation: {
8      nextEl: '.swiper-button-next',
9      prevEl: '.swiper-button-prev',
10    },
11  });
12
13  // menu section メインスライダー
14  var mainSlide = new Swiper('.swiper-menu', {
15    effect: 'fade',
16    loop: true,
17    loopedSlides: 6,
18    allowTouchMove: false,
19    fadeEffect: {
20      crossFade: false,
21    },
22    navigation: {
23      nextEl: '.swiper-button-next',
24      prevEl: '.swiper-button-prev',
25    },
26    thumbs: {
27      swiper: thumbSlide
28    }
29  });
30  // メインのスライドが動いた時にサムネイルも連動させる
31  mainSlide.on('slideChange', () => {
32    // realIndex は現在activeになっているスライドの番号が入っている
33    thumbSlide.slideTo(mainSlide.realIndex);
34  });
35  // サムネイルをスライドした時にメインスライドを連動させる(上記と同じ)
36  thumbSlide.on('slideChange', () => {
37    mainSlide.slideToLoop(thumbSlide.realIndex);
38  });
39
40    //擬似ボタンクリックで本物のボタンをクリック
41  const swiperPrev = document.getElementsByClassName('swiper-button-prev-a');
42  const swiperNext = document.getElementsByClassName('swiper-button-next-a');
43  for (let i = 0; i < swiperPrev.length; i++) {
44    swiperPrev[i].addEventListener('click', (e) => {
45      const parent = e.target.parentNode;
46      const prev = parent.getElementsByClassName('swiper-button-prev')[0];
47      prev.click();
48    });
49  }
50  for (let i = 0; i < swiperNext.length; i++) {
51    swiperNext[i].addEventListener('click', (e) => {
52      const parent = e.target.parentNode;
53      const next = parent.getElementsByClassName('swiper-button-next')[0];
54      next.click();
55    });
56  }
57
58  
59 });
60

CSS
1.bl_menu {
2  position: relative;
3  width: 800px;
4}
5.swiper-container.swiper-menu {
6  max-width: 100%;
7  padding: 40px;
8  margin-right: auto;
9  margin-left: auto;
10}
11.bl_menu_slideContent {
12  // width: 100% !important;
13}
14.swiper-thumb-parent { // for 矢印外だし
15  position: relative;
16  width: 600px;
17  max-width: 100%;
18  padding: 20px 40px;
19  margin-right: auto;
20  margin-left: auto;
21}
22
23.bl_menu .swiper-container.swiper-menuThumb {
24  & .bl_img_thumbUnit li {
25    width: auto;
26    max-width: auto;
27  }
28
29  & .swiper-slide {
30    width: 60px !important;
31  }
32}
33
34.swiper-thumb-parent .swiper-button-prev{
35  //画像にしないとopacity効かない
36  content: '';
37  display: inline-block;
38  width: 40px;
39  height: 40px;
40  border-left: 2px solid #333;
41  border-bottom: 2px solid #333;
42
43}
44
45.swiper-button-prev.swiper-menu-prev,
46.swiper-button-next.swiper-main-next {
47  outline: none;
48  -webkit-tap-highlight-color:rgba(0,0,0,0);
49  }
50
51//元のボタンを飛ばす
52.swiper-menuThumb .swiper-button-prev {
53  left: -100%;
54}
55.swiper-menuThumb .swiper-button-next {
56  right: -100%;
57}
58
59//新たなボタンを設置
60.swiper-button-prev-a {
61  content: '';
62  left: -40px;
63  top: 32%;
64  display: inline-block;
65  width: 40px;
66  height: 40px;
67  border-left: 2px solid #333;
68  border-bottom: 2px solid #333;
69  position: absolute;
70  transform: rotate(45deg);
71}
72
73.swiper-button-next-a {
74  content: '';
75  right: -40px;
76  top: 32%;
77  transform: rotate(-135deg);
78  display: inline-block;
79  width: 40px;
80  height: 40px;
81  border-left: 2px solid #333;
82  border-bottom: 2px solid #333;
83  position: absolute;
84}
85
86.swiper-button-prev-a,
87.swiper-button-next-a {
88  background-position: center center;
89  background-size: cover;
90  background-repeat: no-repeat;
91}
92
93.bl_menu_slideContent {
94  width: 100%;
95  margin: auto;
96  background: pink;
97  padding: 30px 20px;
98}
99
100.swiper-menuThumb .swiper-slide-active {
101  border: 2px solid #333;
102}
103
104.bl_menu_imgWrapper {
105   position: relative;
106  overflow: hidden;
107  height: 0;
108  padding-top: 70%;
109  width: 100%;
110  & > img {
111    position: absolute;
112    top: 50%;
113    width: 100%;
114    height: 100%;
115    transform: translateY( -50% );
116    object-fit: cover;
117    font-family: 'object-fit: cover;' /*ie*/
118  }
119
120}
121.bl_img_thumbUnit {
122  & li {
123    cursor: pointer;
124    margin-left: 7px;
125    margin-bottom: 7px;
126    width: 15%;
127    max-width: 114px;
128    border: 2px solid transparent;
129    &:hover img {
130      opacity: .8;
131    }
132  }
133  .bl_thumb_wrapper {
134      position: relative;
135  overflow: hidden;
136  height: 0;
137  padding-top: 60%;
138  & > img {
139    position: absolute;
140    top: 50%;
141    width: 100%;
142    height: 100%;
143    transform: translateY( -50% );
144    object-fit: cover;
145    font-family: 'object-fit: cover;' /*ie*/
146  }
147  }
148  & li.current {
149    border: 2px solid #333;
150  }
151}
152