サムネイル付きのSwiperで、サムネイルをクリックするとスライドしてしまうので、スライドさせないようにしたい

Swiper(バージョン8)を使って、親サムネイル（メインのスライド）と子サムネイルを設置しています。子サムネイルをクリックすると、スライドが右から左にスライドしてしまうのですが、本当は、

『子サムネイルをクリックしてもスライドしないようにするけど、クリックしたら親サムネイルに反映はできる。スライドするのはswiperのnextボタンやprevボタンを押した時だけ』

という実装にしたいです。

swiperのオプションなど試しているのですが、どうしても子サムネイルをクリックしたらスライドしてしまいます。また、swiperのオプションに、

simulateTouch: false

を記述して、子サムネイルがクリックしてもスライドしないようにすることはできるのですが、その記述をすると子サムネイルをクリックしても親サムネイルに反映されなくなってしまいます。

下記にスライダー部分の子サムネイル部分のhtmlとscss（親サムネイル部分のhtmlとcssも載せたら文字数オーバーになってしまったため）と、swiperに関するJavascriptのコードを載せさせていただくので、どうすれば子サムネイルがスライドしないようにするかをご教示いただけますと幸いでございます。

スライドは全4枚で、子サムネイルはループさせたいので、loop: true;にしております。

（6年ほど前の記事でも同じような質問がありましたが、2つ紹介用のURLが載せられていて一つが内容がわからずで、もう一つがリンク切れになっていたので、質問させていただきました）

index.html

index.html
1<div class="swiper slider-thumbnail">
2   <div class="swiper-wrapper">
3     <!-- 子サムネイルのスライド1枚目 -->
4       <div class="p-contents__flex swiper-slide">
5          <div class="p-contents__en">
6             <img src="./img/contents-en.png" alt="CONTENTS" />
7            </div>
8            <div class="p-contents__image">
9               <img src="./img/contents02.jpg" alt="" />
10             </div>
11             <div class="p-contents__texts">
12                <h2 class="p-contents__title">
13                   1ほげほげ
14                  </h2>
15                  <p class="p-contents__desc">
16       　　　　　2ほげほげ
17                   </p>
18             <div class="p-contents__tags">
19                <div class="p-contents__tag" style="border: none">
20                   #hoge
21                </div>
22              </div>
23
24               <a
25                       href=""
26                       class="p-contents__link c-read-link-two"
27                       target="_blank"
28                       rel="noopener"
29                       >Read more</a
30                >
31                 </div>
32               </div>
33                 <!-- 子サムネイルのスライド2枚目 -->
34                 <div class="p-contents__flex swiper-slide">
35                   <div class="p-contents__en">
36                     <img src="./img/contents-en.png" alt="CONTENTS" />
37                   </div>
38                   <div class="p-contents__image">
39                     <img src="./img/contents01.jpg" alt="" />
40                   </div>
41                   <div class="p-contents__texts">
42                     <h2 class="p-contents__title">
43                       2ほげほげ
44                     </h2>
45                     <p class="p-contents__desc">
46                      2ほげほげほげ
47                     </p>
48                     <div class="p-contents__tags">
49                       <div class="p-contents__tag" style="border: none">
50                         #hoge
51                       </div>
52                     </div>
53
54                     <a
55                       href=""
56                       class="p-contents__link c-read-link-two"
57                       target="_blank"
58                       rel="noopener"
59                       >Read more</a
60                     >
61                   </div>
62                 </div>
63                 <!-- 子サムネイルのスライド3枚目 -->
64                 <div class="p-contents__flex swiper-slide">
65                   <div class="p-contents__en">
66                     <img src="./img/contents-en.png" alt="CONTENTS" />
67                   </div>
68                   <div class="p-contents__image">
69                     <img src="./img/coming.png" alt="" />
70                   </div>
71                   <div class="p-contents__texts">
72                     <h2 class="p-contents__title">3ほげほげ</h2>
73                     <p class="p-contents__desc">c3ほげほげほげ</p>
74                     <div class="p-contents__tags">
75                       <!-- <div class="p-contents__tag" style="border: none">
76                         #hoge
77                       </div> -->
78                     </div>
79
80                     <a
81                       href=""
82                       class="p-contents__link c-read-link-two"
83                       target="_blank"
84                       rel="noopener"
85                       >Read more</a
86                     >
87                   </div>
88                 </div>
89                 <!-- 子サムネイルのスライド4枚目 -->
90                 <div class="p-contents__flex swiper-slide">
91                   <div class="p-contents__en">
92                     <img src="./img/contents-en.png" alt="CONTENTS" />
93                   </div>
94                   <div class="p-contents__image">
95                     <img src="./img/coming.png" alt="" />
96                   </div>
97                   <div class="p-contents__texts">
98                     <h2 class="p-contents__title">4ほげほげ</h2>
99                     <p class="p-contents__desc">4ほげほげほげ</p>
100                     <div class="p-contents__tags">
101                       <!-- <div class="p-contents__tag" style="border: none">
102                         #hoge
103                       </div> -->
104                     </div>
105
106                     <a
107                       href=""
108                       class="p-contents__link c-read-link-two"
109                       target="_blank"
110                       rel="noopener"
111                       >Read more</a
112                     >
113                   </div>
114                 </div>
115               </div>
116             </div>
117             <!-- /サムネイルのSwiper-->
118             <!-- 前後の矢印 -->
119             <div class="swiper-button-prev"></div>
120             <div class="swiper-button-next"></div>

Swiperに関するJavaScript
1// 子サムネイルのswiperの記述
2const sliderThumbnail = new Swiper(".slider-thumbnail", {
3 
4  simulateTouch: false, // クリック操作も無効化
5  spaceBetween: 20,
6  speed: 400,
7width:225,
8 loop: true,
9loopedSlides: 4,
10   breakpoints: {
11      768: {
12    
13        loop: true,
14				spaceBetween: 30,
15				width: 300,
16      }
17    }
18});
19
20
21//親サムネイルのSwiperの記述
22const swiper = new Swiper(".slider", {
23  loop: true,
24   speed: 400,
25effect: "fade", // フェード
26fadeEffect: { //フェードによるスライドの重なりを防ぐための記述
27    crossFade: true
28  },
29    breakpoints: {
30      768: {
31        width: 808,　//widthを指定することでスライドの重なりを回避できたので指定している
32      },
33      800: {
34        width: 840,
35      },
36      850: {
37        width: 890,
38      },
39      900: {
40        width: 940,
41      },
42    950: {
43        width: 990,
44      },
45      1000: {
46        width: 1040,
47      },
48      1050: {
49        width: 1090,
50      },
51      1100: {
52        width: 1107,
53      },
54    },
55  // 前後の矢印
56  navigation: {
57    nextEl: ".swiper-button-next",
58    prevEl: ".swiper-button-prev",
59  },
60  thumbs: {
61    swiper: sliderThumbnail,
62  },
63
64});