Swiper vertical slide inside the tabs clicked slider is stopping

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;
}




    
    
 
        
          First Item
          Second Item
        
       
        
            
            
                    
                
                    
                    
                        
                            
                                # 01
                            
                            
                                # 02
                            
                            
                                # 03
                            
                            
                                # 04
                            
                            
                                # 05
                            
                            
                                # 06
                            
                            
                                # 07
                            
                            
                                # 08
                            
                        
                    
                
                
                
                    
                        
                            
                                #01
                            
                            
                                #02
                            
                            
                                #03
                            
                            
                                #04
                            
                            
                                #05
                            
                            
                                #06
                            
                            
                                #07
                            
                            
                                #08
                            
                        
                    
                    
                    
                        
                        
                    
                
        
            
        
        
        
        
            
            
                    
                
                    
                    
                        
                            
                                # 01
                            
                            
                                # 02
                            
                            
                                # 03
                            
                            
                                # 04
                            
                            
                                # 05
                            
                            
                                # 06
                            
                            
                                # 07
                            
                            
                                # 08
                            
                        
                    
                
                
                
                    
                        
                            
                                #01
                            
                            
                                #02
                            
                            
                                #03
                            
                            
                                #04
                            
                            
                                #05
                            
                            
                                #06
                            
                            
                                #07
                            
                            
                                #08

[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]

Swiper vertical slide inside the tabs clicked slider is stopping

0 Answers