스와이프탭 위젯을 2개 사용하고자 합니다. 채택완료

            <div class="swipe20">
                <div class="swiper-container swiper-tab dark-widget widget-head-tab">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide active">탭1</div>
                        <div class="swiper-slide">탭2</div>
                        <div class="swiper-slide">탭3</div>
                    </div>
                </div>

                <div class="swiper-container swiper-body dark-widget">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <?php echo na_widget('wr-garo', 'tlist-a', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2'); ?>
                        </div>
                        <div class="swiper-slide">
                            <?php echo na_widget('wr-garo', 'tlist-b', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2'); ?>
                        </div>
                        <div class="swiper-slide">
                            <?php echo na_widget('wr-garo', 'tlist-c', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2') ; ?>
                        </div>
                    </div>
                </div>
            </div>

메인에서 이렇게 출력되고 있고, 해당 스크립트는 아래와 같습니다.

<script>
window.onload = function() {
  
function setCurrentSlide(ele,index){
    $(".swiper-tab .swiper-slide").removeClass("active");
    ele.addClass("active");
}

var swiper_tab = new Swiper('.swiper-tab', {
    <?php if(!G5_IS_MOBILE) {?>
        slidesPerView: 10,
        spaceBetween: 10,
    <?php } else {?>
        slidesPerView: 5,
        spaceBetween: 0,
    <?php } ?>
    paginationClickable: true,
    freeMode: true,
    loop: false,
    onTab:function(swiper){
      var n = swiper_tab.clickedIndex;
      alert(1);
    }
});

swiper_tab.slides.each(function(index,val){
    var ele=$(this);
    ele.on("click",function(){
      setCurrentSlide(ele,index);
      swiper_body.slideTo(index, 500, false);
    });
});

var swiper_body = new Swiper ('.swiper-body', {
    direction: 'horizontal',
    loop: false,
    autoHeight: true,
    spaceBetween: 10,
    onSlideChangeEnd: function(swiper){
      var n=swiper.activeIndex;
      setCurrentSlide($(".swiper-tab .swiper-slide").eq(n),n);
      swiper_tab.slideTo(n, 500, false);
    }
  });
}
</script>
 

스와이프를 하나 더 쓰려고 아래와 같이 코드 복사하여 붙여넣으면 탭버튼이 동작하질 않네요...

            <div class="swipe20">
                <div class="swiper-container swiper-tab dark-widget widget-head-tab">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide active">탭4</div>
                        <div class="swiper-slide">탭5</div>
                        <div class="swiper-slide">탭6</div>
                    </div>
                </div>

                <div class="swiper-container swiper-body dark-widget">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <?php echo na_widget('wr-garo', 'tlist-d', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2'); ?>
                        </div>
                        <div class="swiper-slide">
                            <?php echo na_widget('wr-garo', 'tlist-e', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2'); ?>
                        </div>
                        <div class="swiper-slide">
                            <?php echo na_widget('wr-garo', 'tlist-f', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2') ; ?>
                        </div>
                    </div>
                </div>
            </div>

어떤 부분 수정해야 중복 사용 가능할까요.