swiper（サムネ付き）の問題を解決したい

前提・実現したいこと

WordPressで構築中のサイトにおいて
swiperの下記の問題を解決したいです。

・サムネイル画像とメイン画像が連動して動かない
・サムネイル画像がスライドをすると右側の画像が非表示になる

発生している問題・エラーメッセージ

![]
上記右側の画像が非表示になるイメージ図です。
なお、サムネイルを再度クリックすると表示されます。

エラーメッセージは特に発生しておりません。

該当のソースコード

html
1<div class="uc01 slide-box">
2<!-- スライダー-->
3  <div id="slider" class="swiper-container5">
4    <div class="swiper-wrapper">
5        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
6        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
7        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
8        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
9        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
10    </div>
11        <div class="swiper-button-prev5"></div>
12        <div class="swiper-button-next5"></div>
13</div>
14<div id="thumbs" class="swiper-container5">
15    <div class="swiper-wrapper">
16        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
17        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
18        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
19        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
20        <div class="swiper-slide ofimg"><img src="/wp-content/themes/xxx/img/common/dammy01.jpg"></div>
21    </div>
22</div>

js
1var slider = new Swiper ('#slider', {
2	slidesPerView: 1,
3   autoplay: 5000,
4   loop: true,
5   loopedSlides: 6,
6   centeredSlides : true,
7   disableOnInteraction: true,
8	navigation: {
9		nextEl: '.swiper-button-next5',
10		prevEl: '.swiper-button-prev5'
11	},
12});
13 
14var thumbs = new Swiper('#thumbs', {
15           centeredSlides: true,
16          spaceBetween: 10,
17          loop: true,
18          slidesPerView: "auto",
19          touchRatio: 0.2,
20          slideToClickedSlide: true,
21});
22
23slider.params.control = thumbs;
24thumbs.params.control = slider;

css
1.slide-box{
2    position: relative;
3    margin:100px auto 60px auto;
4    max-width: 1100px;
5}
6.swiper-container5{
7    text-align: center;
8    cursor: grab;
9	width:100%;
10	overflow:hidden;
11	position:relative;
12}
13.swiper-containe5r:active{
14    cursor: grabbing;
15}
16.swiper-container5 .swiper-slide{
17	height:500px;
18}
19.swiper-container5 .swiper-slide img {
20    max-width: 100%;
21    width: 100%;
22    height: auto;
23}
24         
25#thumbs {
26    height: 10%;
27    box-sizing: border-box;
28    padding: 10px 0;
29}
30#thumbs .swiper-slide {
31    width: 16%;
32    height: auto;
33    opacity: 0.3;
34    cursor: grab;
35}
36#thumbs .swiper-slide:active {
37    cursor: grabbing;
38}
39#thumbs .swiper-slide-active {
40    opacity: 1;
41}
42.swiper-button-prev5, .swiper-button-next5 {
43    background-repeat: no-repeat;
44    width: 45px;
45    height: 45px;
46    margin-top: -30px;
47    background-size: contain;
48	position:absolute;
49	z-index:10;
50	top:240px;
51}     
52.swiper-button-prev5 {
53    background-image: url(/wp-content/themes/xxx/img/common/nvg_prev2.svg);
54	left:15px;
55}
56.swiper-button-next5 {
57    background-image: url(/wp-content/themes/xxx/img/common/nvg_next2.svg);
58	right:10px;
59}
60@media (max-width: 850px){
61	.swiper-container5 .swiper-slide{
62		height:250px;
63	}
64	.swiper-button-prev5, .swiper-button-next5{
65		top:125px;
66	}
67}