Swiper vertical slide inside the tabs clicked slider is stopping - tabs

Question

$(window).on({
load: function(){
$(this).trigger('resize');
}
});
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
var _prev = document.querySelector(".thumb-prev");
var _next = document.querySelector(".thumb-next");
var thumbnail;
var big;
thumbnail = new Swiper(".thumb", {
observer: true,
observeParents: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
centeredSlides: false,
slidesPerView: 3,
spaceBetween: 2,
loop: true,
direction: "vertical",
slideToClickedSlide: true,
rebuildOnUpdate: true
});
big = new Swiper(".big", {
observer: true,
observeParents: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
loop: true,
slidesPerView: 3,
navigation: {
nextEl: _next,
prevEl: _prev,
},
autoplay: {
delay: 1500,
disableOnInteraction: false,
pauseOnMouseEnter: false,
},
rebuildOnUpdate: true
});
big.controller.control = thumbnail;
thumbnail.controller.control = big;
big.update();
var _prev = document.querySelector(".thumb-prev2");
var _next = document.querySelector(".thumb-next2");
var thumbnail2;
var big2;
thumbnail2 = new Swiper(".thumb2", {
observer: true,
observeParents: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
centeredSlides: false,
slidesPerView: 3,
spaceBetween: 2,
loop: true,
direction: "vertical",
slideToClickedSlide: true,
rebuildOnUpdate: true
});
big2 = new Swiper(".big2", {
observer: true,
observeParents: true,
loop: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
slidesPerView: 3,
navigation: {
nextEl: _next,
prevEl: _prev,
},
autoplay: {
delay: 1500,
disableOnInteraction: false,
pauseOnMouseEnter: false,
},
rebuildOnUpdate: true
});
big2.controller.control = thumbnail2;
thumbnail2.controller.control = big2;
big2.update();
#import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#100;200;300;400;500;600;700;800;900&display=swap');
.roboto-slab {font-family: 'Roboto Slab', serif;}
.container {
font-family: 'Roboto Slab', serif;
}
/* tab area */
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
padding: 15px 0;
border-top:3px solid #eee;
}
.tab-content.current{
display: inherit;
}
/* //tab area */
body, html {
margin: 0;
padding: 0;
}
.swiper-initialized {
overflow: hidden;
}
.swiper-slide-active {
color: blue !important; /* paired item style */
}
.swiper-slide-thumb-active {
color: greenyellow; /* same as paired item style, but it works when using 'thumbs:...' settings. It's NOT used here */
}
.slider__area {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 60vw;
}
.slider__box {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.big {
display: flex;
justify-content: center;
align-items: center;
width: 50vw;
height: 30vw;
background-color: aquamarine;
}
.big2 {
display: flex;
justify-content: center;
align-items: center;
width: 50vw;
height: 30vw;
background-color:skyblue;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
font-weight: 600;
color: yellow;
}
.swiper-slide:hover {
background-color: hotpink;
cursor: pointer;
}
.thumb {
width: 20vw;
max-height: 30vh;
background-color: darkorange;
}
.thumb .swiper-slide {
background: crimson;
display: flex;
align-items: center;
cursor: pointer;
}
.thumb .swiper-slide:hover {
background: mediumturquoise;
}
.thumb2 {
width: 20vw;
max-height: 30vh;
background-color: mediumslateblue;
}
.thumb2 .swiper-slide {
background: coral;
display: flex;
align-items: center;
cursor: pointer;
}
.thumb2 .swiper-slide:hover {
background: mediumseagreen;
}
.slider__arrowbox {
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
width: 20vw;
height: 5vw;
background-color: midnightblue;
top: -7vw;
right: 0vw;
}
.slider__arrowbox .swiper-button-prev {
position: relative;
padding: 0.5vw 2vw;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
color:lime;
}
.slider__arrowbox .swiper-button-next {
position: relative;
padding: 0.5vw 2vw;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
color:lime;
}
.slider__arrowbox .swiper-button-prev:hover,
.slider__arrowbox .swiper-button-next:hover {
color: blue;
background-color: aliceblue;
}
.slider__arrowbox .swiper-button-prev2 {
position: relative;
padding: 0.5vw 2vw;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
color:lime;
}
.slider__arrowbox .swiper-button-next2 {
position: relative;
padding: 0.5vw 2vw;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
color:lime;
}
.slider__arrowbox .swiper-button-prev2:hover,
.slider__arrowbox .swiper-button-next2:hover {
color: blue;
background-color: aliceblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.min.css" rel="stylesheet"/>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">First Item</li>
<li class="tab-link" data-tab="tab-2">Second Item</li>
</ul>
<div id="tab-1" class="tab-content current">
<div class="slider__area">
<div class="slider__box">
<div class="thumb swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
# 01
</div>
<div class="swiper-slide">
# 02
</div>
<div class="swiper-slide">
# 03
</div>
<div class="swiper-slide">
# 04
</div>
<div class="swiper-slide">
# 05
</div>
<div class="swiper-slide">
# 06
</div>
<div class="swiper-slide">
# 07
</div>
<div class="swiper-slide">
# 08
</div>
</div>
</div>
<div class="big swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
#01
</div>
<div class="swiper-slide">
#02
</div>
<div class="swiper-slide">
#03
</div>
<div class="swiper-slide">
#04
</div>
<div class="swiper-slide">
#05
</div>
<div class="swiper-slide">
#06
</div>
<div class="swiper-slide">
#07
</div>
<div class="swiper-slide">
#08
</div>
</div>
</div>
<div class="slider__arrowbox">
<div class="swiper-button-prev thumb-prev"></div>
<div class="swiper-button-next thumb-next"></div>
</div>
</div>
</div>
</div>
<div id="tab-2" class="tab-content">
<div class="slider__area">
<div class="slider__box">
<div class="thumb2 swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
# 01
</div>
<div class="swiper-slide">
# 02
</div>
<div class="swiper-slide">
# 03
</div>
<div class="swiper-slide">
# 04
</div>
<div class="swiper-slide">
# 05
</div>
<div class="swiper-slide">
# 06
</div>
<div class="swiper-slide">
# 07
</div>
<div class="swiper-slide">
# 08
</div>
</div>
</div>
<div class="big2 swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
#01
</div>
<div class="swiper-slide">
#02
</div>
<div class="swiper-slide">
#03
</div>
<div class="swiper-slide">
#04
</div>
<div class="swiper-slide">
#05
</div>
<div class="swiper-slide">
#06
</div>
<div class="swiper-slide">
#07
</div>
<div class="swiper-slide">
#08
</div>
</div>
</div>
<div class="slider__arrowbox">
<div class="swiper-button-prev thumb-prev2"></div>
<div class="swiper-button-next thumb-next2"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
[demo check in codepen][1]
I'm tryting to make swiper slide in the tab.
Problem is if I clicked the second button is fine but after click again 1st menu and 2nd menu, slider is stopping. after that I click the thumbnail then move again.
I already add observer parameter but it doesn't work.
[https://codepen.io/patcaulfield/pen/xxjLxLm][1]