swiper (tabmenu 활용시 오류)

swiper.js 사용할 때 탭메뉴 안에 넣어서 여러개를 작동시켜야 하는경우 탭을 누르다보면 swiper가 멈추거나 버튼을 눌러도 작동이 안할때가 있다.

<ul class="tabmenu">
    <li><a href="javascript:;">11</a></li>
    <li><a href="javascript:;">22</a></li>
    <li><a href="javascript:;">33</a></li>
  </ul>
  <div class="cont on">
    <div class="swiper mySwiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1-1</div>
        <div class="swiper-slide">Slide 1-2</div>
        <div class="swiper-slide">Slide 1-3</div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
  <div class="cont">
    <div class="swiper mySwiper2">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 2-1</div>
        <div class="swiper-slide">Slide 2-2</div>
        <div class="swiper-slide">Slide 2-3</div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
  <div class="cont">
    <div class="swiper mySwiper3">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 3-1</div>
        <div class="swiper-slide">Slide 3-2</div>
        <div class="swiper-slide">Slide 3-3</div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>

var swiper01 = new Swiper('.mySwiper1', {
      loop: true,
      loopFillGroupWithBlank: true,
      spaceBetween: 8,    
      slidesPerView: 'auto', 
      
      autoplay: {
        delay: 2500, 
        disableOnInteraction: false, 
      },
      navigation: {  
        nextEl: `.mySwiper1 .swiper-button-prev`,
        prevEl: `.mySwiper1 .swiper-button-next`,
      },
      observer : true, 
      observeParents : true,
      
    });

  var swiper02 = new Swiper('.mySwiper2', {
      loop: true,
      loopFillGroupWithBlank: true,
      spaceBetween: 8,    
      slidesPerView: 'auto', 
      
      autoplay: {
        delay: 2500, 
        disableOnInteraction: false, 
      },
      navigation: {  
        nextEl: `.mySwiper2 .swiper-button-prev`,
        prevEl: `.mySwiper2 .swiper-button-next`,
      },
      observer : true, 
      observeParents : true,
      
    });

  var swiper03 = new Swiper('.mySwiper3', {
      loop: true,
      loopFillGroupWithBlank: true,
      spaceBetween: 8,    
      slidesPerView: 'auto', 
      
      autoplay: {
        delay: 2500, 
        disableOnInteraction: false, 
      },
      navigation: {  
        nextEl: `.mySwiper3 .swiper-button-prev`,
        prevEl: `.mySwiper3 .swiper-button-next`,
      },
      observer : true, 
      observeParents : true,
      
    });
   

    $('.tabmenu li a').click(function(){
      $('.tabmenu li a').parent().removeClass('on');
      $(this).parent().addClass('on');
      const idx = $(this).parent().index();
      
      $('.cont').removeClass('on')
      $('.cont').eq(idx).addClass('on');

      swiper01.autoplay.stop();
      swiper02.autoplay.stop();
      swiper03.autoplay.stop();

      console.log(idx+1);

      const swiperArray = [swiper01, swiper02, swiper03];
      if (swiperArray[idx]) {
          swiperArray[idx].autoplay.start();
      }
    })

그럴때는 탭을 눌렀을때 각 swiper의 autoplay.stop()을 해주고,
해당스와이퍼를 가져온뒤 autoplay.start()를 해주면 해결된다.